:root {
  --surface: rgba(255, 255, 255, 0.9);
  --card: rgba(255, 255, 255, 0.76);
  --card-strong: #ffffff;
  --text: #16181d;
  --muted: #6f7582;
  --line: rgba(60, 60, 67, 0.12);
  --brand-deep: #ffb300;
  --danger: #ff5a36;
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --topbar-height: 98px;
  --topbar-gap: 10px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
body { background: linear-gradient(180deg, #f4f5f8 0%, #f6f7fb 35%, #f3f4f8 100%); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { border: 0; background: none; cursor: pointer; }
input, textarea, select { border: 0; outline: none; background: transparent; }
.page-bg { position: fixed; inset: 0; background: radial-gradient(circle at top left, rgba(255,210,91,.18), transparent 30%), radial-gradient(circle at right 12% top 18%, rgba(133,173,255,.12), transparent 24%), radial-gradient(circle at left 18% bottom 10%, rgba(255,179,120,.1), transparent 24%); pointer-events: none; }
.app-shell { position: relative; display: flex; justify-content: center; height: 100vh; padding: 32px 18px 120px; overflow: hidden; }
.preview-screen { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 22px 18px; background: radial-gradient(circle at top center, rgba(255, 235, 173, 0.38), transparent 34%), linear-gradient(180deg, #f7f7f4 0%, #f3f5f8 46%, #eef3fa 100%); opacity: 1; transition: opacity .28s ease; }
.preview-image-button { width: min(100%, 430px); padding: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 28px 72px rgba(15,23,42,.18); background: transparent; }
.preview-page-image { display: block; width: 100%; height: auto; }
.preview-phone { position: relative; width: min(100%, 420px); height: min(88vh, 760px); display: flex; flex-direction: column; align-items: center; padding: 54px 28px 34px; border-radius: 42px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.94)); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 30px 72px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.92); overflow: hidden; }
.preview-phone::before { content: ""; position: absolute; inset: auto -16% -10% -16%; height: 220px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255, 193, 42, 0.24), rgba(255, 193, 42, 0.02) 68%, transparent 72%); pointer-events: none; }
.preview-phone::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 20px; height: 10px; border-radius: 999px; background: rgba(15, 18, 24, 0.06); filter: blur(10px); pointer-events: none; }
.preview-logo-wrap { width: min(58%, 220px); aspect-ratio: 1 / 1; display: grid; place-items: center; margin-top: 8px; padding: 10px; border-radius: 34px; background: linear-gradient(180deg, #ffffff, #f6f8fb); box-shadow: 0 18px 40px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92); }
.preview-logo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 28px; }
.preview-actions { width: 100%; display: grid; justify-items: center; gap: 8px; margin-top: 34px; }
.preview-enter-btn { width: min(100%, 224px); height: 50px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #3a2a00; background: linear-gradient(180deg, #ffd76a, #ffbc1d); box-shadow: 0 16px 30px rgba(255,184,25,.24); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.preview-enter-btn:active { transform: translateY(1px) scale(.992); box-shadow: 0 9px 18px rgba(255,184,25,.2); }
.preview-enter-btn[disabled] { opacity: .62; cursor: default; }
.preview-copy { margin-top: auto; width: 100%; display: grid; gap: 10px; padding: 0 2px; text-align: left; }
.preview-kicker { color: #6e675d; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.preview-copy h1 { margin: 0; font-size: 40px; line-height: 1.04; letter-spacing: -.06em; color: #171513; font-weight: 800; }
.preview-copy p { margin: 0; color: #6e675d; font-size: 15px; line-height: 1.7; }
body.preview-visible .app-shell, body.preview-visible .page-bg { opacity: 0; visibility: hidden; pointer-events: none; user-select: none; }
.app-shell, .page-bg { transition: filter .28s ease, transform .28s ease, opacity .28s ease; }
.preview-screen.is-exiting { opacity: 0; pointer-events: none; }
.miniapp-frame { width: min(100%, 420px); height: calc(100vh - 64px); padding: 0 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.72); border-radius: 36px; background: linear-gradient(180deg, rgba(249,250,252,.78), rgba(244,246,250,.8)); box-shadow: 0 22px 56px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(24px) saturate(1.15); }
.miniapp-frame #viewRoot { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.miniapp-frame #viewRoot::-webkit-scrollbar { display: none; }
.page-view, .topbar, .product-list, .service-list, .simple-list, .message-list, .session-list, .gallery-block, .login-actions, .filter-panel, .filter-group, .form-field, .profile-card, .card-block, .form-grid, .upload-grid { display: grid; gap: 16px; }
.topbar { position: fixed; top: 0; left: 50%; z-index: 240; width: min(calc(100vw - 36px), 420px); height: var(--topbar-height); transform: translateX(-50%); margin: 0; padding: 16px 16px 10px; gap: 8px; align-content: start; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, rgba(248,249,252,.82) 0%, rgba(246,247,251,.76) 78%, rgba(246,247,251,.64) 100%); border-bottom: 1px solid rgba(60,60,67,.08); backdrop-filter: blur(26px) saturate(1.12); box-shadow: 0 8px 18px rgba(15,23,42,.05); }
.dynamic-island { position: absolute; top: 18px; left: 50%; width: 72px; height: 20px; transform: translateX(-50%); border-radius: 999px; background: rgba(16,18,18,.94); box-shadow: 0 5px 12px rgba(0,0,0,.13); display: grid; place-items: center; z-index: 3; }
.dynamic-island span { width: 24px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); }
.page-view { position: relative; min-height: 100%; padding-top: calc(var(--topbar-height) + var(--topbar-gap)); padding-bottom: 124px; }
.home-page { padding-top: calc(var(--topbar-height) + 68px); }
.status-row, .nav-row, .section-head, .search-card, .title-line, .price-line, .seller-row, .seller-main, .detail-title-row, .bottom-nav, .detail-actions, .stats-row, .composer, .session-top, .simple-item, .session-card { display: flex; align-items: center; justify-content: space-between; }
.status-row { padding: 0 4px; font-size: 12px; font-weight: 600; }
.status-time { display: inline-flex; align-items: center; gap: 5px; }
.location-arrow { width: 9px; height: 9px; display: inline-block; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 53% 75%, 28% 100%); transform: rotate(35deg); opacity: .86; }
.status-icons { display: flex; align-items: center; gap: 5px; color: rgba(31,42,34,.82); }
.signal-icon { display: flex; align-items: flex-end; gap: 1.5px; height: 12px; }
.signal-icon i { width: 2.5px; border-radius: 999px; background: currentColor; }
.signal-icon i:nth-child(1) { height: 4px; }
.signal-icon i:nth-child(2) { height: 6px; }
.signal-icon i:nth-child(3) { height: 8px; }
.signal-icon i:nth-child(4) { height: 10px; }
.wifi-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wifi-icon circle { fill: currentColor; stroke: none; }
.battery-icon { position: relative; width: 27px; height: 13px; border: 1.5px solid currentColor; border-radius: 4px; overflow: visible; color: rgba(31,42,34,.86); }
.battery-icon::after { content: ""; position: absolute; right: -3.7px; top: 3.5px; width: 2.4px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }
.battery-icon i { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 80%; max-width: calc(100% - 3px); border-radius: 2.5px; background: currentColor; opacity: .88; }
.battery-icon b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 8px; line-height: 1; font-weight: 800; z-index: 1; transform: scale(.9); }
.nav-btn, .capsule { height: 28px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(60,60,67,.1); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(15,23,42,.05); }
.nav-btn { width: 38px; }
.nav-btn.hidden { visibility: hidden; }
.nav-title span.hidden { display: none; }
.nav-btn svg, .search-box svg, .favorite-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-row { min-height: 34px; }
.nav-title { display: grid; min-height: 32px; justify-items: center; align-content: center; gap: 1px; text-align: center; }
.nav-title strong { font-size: 16px; line-height: 1.2; }
.nav-title span, .eyebrow, .hero-text, .section-head p, .meta, .seller-detail, .distance, .origin-price, .mini-tag, .spec-card span, .service-item, .form-field span, .simple-item p, .session-main p, .session-main small, .message-bubble time, .filter-label, .agreement, .field-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.capsule { width: 70px; gap: 8px; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.52); }
.capsule-circle { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid rgba(24,37,27,.72); }
.capsule-circle i { width: 8px; height: 8px; border-radius: 50%; border: 1.3px solid rgba(24,37,27,.62); background: rgba(24,37,27,.08); }
.capsule-divider { width: 1px; height: 16px; background: rgba(24,37,27,.16); }
.capsule-dots { display: flex; align-items: center; gap: 3px; }
.capsule-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(24,37,27,.72); }
.capsule-dots i:nth-child(2) { width: 5.5px; height: 5.5px; }
.search-card, .list-panel, .card-block, .filter-panel, .hero-card { padding: 16px; border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.64); backdrop-filter: blur(22px) saturate(1.08); }
.home-list-panel { padding: 0; margin-top: 14px; background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.publish-page { background: rgba(255, 250, 220, 0.18); border-radius: var(--radius-xl); padding-left: 16px; padding-right: 16px; }
.flat-page > .card-block, .publish-page .section-shell, .profile-page .section-shell { padding: 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; }
.flat-page > .card-block + .card-block, .publish-page .section-shell + .section-shell, .profile-page .section-shell + .section-shell { margin-top: 6px; }
.publish-media-section { margin-top: 10px; }
.profile-page .profile-head { padding: 14px 2px 0; border: 0; background: transparent; box-shadow: none; }
.filter-panel { position: fixed; left: 50%; top: calc(var(--topbar-height) + 58px); z-index: 229; width: min(calc(100vw - 32px), 388px); transform: translateX(-50%); max-height: min(70vh, 520px); overflow-y: auto; background: rgba(248,249,252,.84); }
.filter-scrim { position: fixed; inset: calc(var(--topbar-height) + 52px) 0 0; z-index: 228; border-radius: 0; background: rgba(31,25,10,.12); }
.hero-card { position: relative; overflow: hidden; background: radial-gradient(circle at right top, rgba(255,255,255,.34), transparent 28%), linear-gradient(135deg, #ffd84d, #ffbf1b 58%, #ff9f0a); color: #3a2900; }
.hero-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -72px; top: -84px; border-radius: 50%; background: rgba(255,255,255,.22); }
.hero-card h1, .detail-main h1 { margin: 8px 0 10px; font-size: 24px; line-height: 1.25; }
.hero-stats, .chip-row, .sort-row, .label-row, .thumb-badges, .spec-grid, .toggle-grid, .appointment-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-stats article { flex: 1; min-width: 88px; padding: 12px 10px; border-radius: 20px; background: rgba(255,251,239,.52); border: 1px solid rgba(255,255,255,.34); }
.hero-stats strong, .price-line strong, .stat-pill strong, .spec-card strong { display: block; }
.hero-stats strong { margin-bottom: 4px; font-size: 20px; }
.search-card { gap: 12px; }
.home-search-card { position: fixed; left: 50%; top: calc(var(--topbar-height) + 14px); z-index: 230; width: min(calc(100vw - 32px), 388px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px; margin-top: 0; border: 1px solid rgba(255, 220, 112, 0.5); border-radius: 16px; background: rgba(255, 245, 196, 0.88); box-shadow: 0 8px 18px rgba(214, 169, 57, 0.16); backdrop-filter: blur(10px); flex-wrap: wrap; }
.search-box, .form-field input, .form-field textarea, .form-field select, .composer input { width: 100%; }
.search-box, .form-field input, .form-field textarea, .form-field select, .composer input { padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.search-box { flex: 1; min-width: 0; height: 38px; padding: 6px 8px 6px 12px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: #fff; border: 1px solid rgba(60, 60, 67, 0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.search-box input { flex: 1; min-width: 0; width: auto; font-size: 13px; letter-spacing: 0; }
.search-box input::placeholder { font-size: 13px; letter-spacing: 0; }
.filter-toggle-btn { flex: none; order: -1; height: 38px; padding: 0 13px; border-radius: 15px; background: linear-gradient(180deg, #ffc546, #ffb300); color: #3b2a00; font-size: 13px; font-weight: 700; border: 1px solid rgba(229, 161, 0, 0.55); box-shadow: 0 6px 14px rgba(196, 138, 0, 0.2); }
.filter-toggle-btn.active { background: linear-gradient(180deg, #ffba2f, #ffa700); color: #342500; border-color: rgba(209, 143, 0, 0.68); }
.search-submit-btn { flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(255, 196, 64, 0.2); color: #7a5a0b; }
.search-submit-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.search-suggest-list { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggest-item { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 214, 97, 0.6); color: #6d5718; font-size: 12px; line-height: 1; }
.filter-actions { display: flex; flex: none; gap: 8px; align-items: center; }
.confirm-filter-btn { background: linear-gradient(180deg, #ffe06f, #ffcc36); color: #3b2a00; font-weight: 800; }
.publish-btn, .chat-btn, .ghost-wide { height: 44px; padding: 0 18px; border-radius: 16px; font-weight: 700; }
.publish-btn, .chat-btn { color: #332500; background: linear-gradient(180deg, #ffd868, #ffc229); box-shadow: 0 10px 24px rgba(255,184,25,.18); }
.ghost-wide, .ghost-btn, .chip, .sort-pill, .upload-chip { background: rgba(255,255,255,.78); color: var(--text); border: 1px solid rgba(60,60,67,.1); }
.ghost-btn, .chip, .sort-pill, .upload-chip { padding: 10px 14px; border-radius: 999px; font-size: 12px; }
.chip.active, .sort-pill.active, .toggle-card.active { color: #3b2a00; background: linear-gradient(180deg, #ffd867, #ffbf2b); border-color: rgba(255,196,64,.38); }
.section-head h2, .product-body h3, .detail-main h1 { font-size: 17px; }
.section-head h2, .product-brand, .title-line h3, .seller-name, .profile-head h2 { margin: 0; }
.product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.product-card { position: relative; display: grid; gap: 8px; padding: 8px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,249,252,.88)); border: 1px solid rgba(255,255,255,.78); box-shadow: 0 12px 26px rgba(15,23,42,.08); cursor: pointer; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; backdrop-filter: blur(20px) saturate(1.05); }
.product-card:active { transform: translateY(1px) scale(.992); box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.thumb-wrap { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #f3f4f7, #eceff4); }
.thumb-image, .detail-cover, .thumb-mini img, .session-thumb, .chat-image, .upload-preview img, .profile-avatar { display: block; width: 100%; object-fit: cover; }
.thumb-image { height: 142px; border-radius: 16px; background: #f3f0e7; transition: transform .22s ease; }
.product-card:active .thumb-image { transform: scale(1.02); }
.thumb-badges { position: absolute; left: 12px; top: 12px; right: 12px; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.82); color: #4b5563; backdrop-filter: blur(10px); }
.favorite-btn { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; color: #6b7280; background: rgba(255,255,255,.88); box-shadow: 0 6px 14px rgba(15,23,42,.08); backdrop-filter: blur(12px); }
.favorite-btn.active { color: #ff6464; background: rgba(255,255,255,.95); }
.favorite-btn.active svg { fill: currentColor; stroke: currentColor; }
.product-body, .detail-main { display: grid; gap: 10px; }
.product-body { gap: 7px; letter-spacing: -0.01em; }
.product-body.compact { gap: 5px; padding: 2px 2px 0; }
.product-brand { color: var(--muted); font-size: 12px; }
.product-body h3 { margin: 0; min-height: 36px; font-size: 13px; line-height: 1.38; letter-spacing: -0.02em; color: #2c2214; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card .price-line strong { font-size: 19px; }
.product-card .meta { font-size: 12px; line-height: 1.35; }
.product-card .label-row { gap: 6px; }
.product-card .label { padding: 6px 9px; }
.distance { padding: 6px 9px; border-radius: 999px; background: rgba(255,203,61,.16); }
.price-line { align-items: baseline; }
.price-line.compact { gap: 5px; }
.price-line strong { font-size: 24px; color: #ff8a00; }
.origin-price { text-decoration: line-through; font-size: 11px; color: #9ca3af; }
.meta { margin: 0; font-size: 13px; line-height: 1.6; }
.label { padding: 8px 11px; border-radius: 999px; font-size: 11px; color: #7a5b17; background: rgba(255,221,123,.22); border: 1px solid rgba(255,255,255,.5); }
.seller-row, .seller-main, .profile-head { gap: 10px; }
.avatar, .profile-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(36,48,41,.16), rgba(36,48,41,.05)); border: 1px solid rgba(25,45,30,.08); }
.profile-avatar { width: 64px; height: 64px; }
.profile-head { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.profile-meta { flex: 1; min-width: 0; }
.profile-meta p { margin: 4px 0 0; }
.detail-link-btn { min-width: 64px; height: 34px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.gallery-block { gap: 10px; }
.detail-cover { height: 224px; border-radius: 18px; box-shadow: 0 10px 22px rgba(201,154,52,.1); }
.thumb-strip, .spec-grid, .form-grid, .toggle-grid, .upload-grid { display: grid; gap: 12px; }
.thumb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.upload-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thumb-mini { padding: 0; overflow: hidden; border-radius: 14px; border: 2px solid transparent; background: rgba(255,255,255,.9); }
.thumb-mini.active { border-color: rgba(255,184,25,.6); }
.thumb-mini img { height: 62px; }
.spec-grid, .toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wide { grid-column: 1 / -1; }
.spec-card, .service-item, .toggle-card, .stat-pill, .session-card, .simple-item, .message-bubble { padding: 14px; border-radius: 20px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.68); box-shadow: 0 8px 18px rgba(15,23,42,.05); backdrop-filter: blur(18px); }
.simple-item { width: 100%; text-align: left; }
.simple-item > div { text-align: left; }
.profile-stats-row { gap: 12px; align-items: stretch; margin-top: 8px; }
.profile-stat { padding: 16px 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,251,.9)); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 12px 26px rgba(15,23,42,.07); }
.profile-stat strong { font-size: 24px; margin-bottom: 6px; }
.profile-stat span { font-size: 12px; color: #68563b; }
.settings-list { gap: 10px; }
.settings-item { padding: 15px 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,251,.9)); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 12px 24px rgba(15,23,42,.06); }
.settings-item:active { transform: scale(.992); }
.settings-main { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; font-weight: 600; color: #2d2415; }
.settings-icon { flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 12px; color: #7a5a0b; background: linear-gradient(180deg, rgba(255,234,177,.44), rgba(255,219,127,.26)); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 6px 14px rgba(15,23,42,.05); }
.settings-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-service { color: #9d6a00; background: linear-gradient(180deg, rgba(255,216,118,.34), rgba(255,190,92,.2)); }
.icon-help { color: #7e5b12; background: linear-gradient(180deg, rgba(255,231,166,.36), rgba(245,214,136,.22)); }
.icon-agreement { color: #835d12; background: linear-gradient(180deg, rgba(255,232,174,.34), rgba(255,210,109,.2)); }
.icon-privacy { color: #87621f; background: linear-gradient(180deg, rgba(255,236,188,.34), rgba(246,214,134,.2)); }
.icon-logout { color: #b2552d; background: linear-gradient(180deg, rgba(255,199,176,.28), rgba(255,138,113,.16)); }
.publish-item { display: flex; align-items: stretch; gap: 10px; padding: 0; background: transparent; }
.simple-main { display: flex; align-items: center; justify-content: space-between; flex: 1; width: 100%; text-align: left; }
.publish-delete-btn { flex: none; align-self: center; min-width: 62px; }
.mine-entry-list { gap: 8px; }
.mine-list-page .compact-head { margin-bottom: -8px; }
.mine-entry-card { display: flex; align-items: stretch; gap: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.published-entry-card { position: relative; z-index: 1; transform: translateX(var(--swipe-x, 0)); transition: transform .18s ease; }
.mine-list-page { padding-top: calc(var(--topbar-height) + 16px); }
.mine-swipe-shell { position: relative; overflow: hidden; border-radius: 20px; background: transparent; touch-action: pan-y; }
.mine-swipe-shell.dragging .published-entry-card { transition: none; }
.mine-swipe-shell.reveal .published-entry-card { transform: translateX(-56px); }
.mine-swipe-shell + .mine-swipe-shell { margin-top: 1px; }
.mine-swipe-delete { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 56px; border-radius: 0 20px 20px 0; display: inline-grid; place-items: center; background: linear-gradient(180deg, #ff6250, #ff4635); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; opacity: 0; pointer-events: none; transform: none; transition: opacity .18s ease; }
.mine-swipe-shell.dragging .mine-swipe-delete, .mine-swipe-shell.reveal .mine-swipe-delete { opacity: 1; }
.mine-swipe-shell.reveal .mine-swipe-delete { pointer-events: auto; }
.mine-pub-card { width: 100%; padding: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,248,251,.92)); border: 1px solid rgba(255,255,255,.84); box-shadow: 0 8px 18px rgba(15,23,42,.055); text-align: left; }
.mine-pub-main { width: 100%; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; padding: 10px; text-align: left; cursor: pointer; }
.mine-pub-main:active, .mine-fav-card:active { transform: scale(.995); }
.mine-pub-cover { display: block; width: 68px; height: 68px; border-radius: 14px; object-fit: cover; background: linear-gradient(180deg, #f3f4f7, #eceff4); }
.mine-pub-copy { min-width: 0; display: grid; align-content: start; gap: 5px; }
.mine-pub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mine-pub-top strong { margin: 0; flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: #171a20; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-pub-price { flex: none; font-size: 16px; font-weight: 800; color: #ff8a00; letter-spacing: -.01em; }
.mine-pub-sub { margin: 0; color: #7b8190; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mine-pub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mine-pub-tag { padding: 3px 7px; border-radius: 999px; background: rgba(241,243,247,.98); border: 1px solid rgba(60,60,67,.08); color: #6a7280; font-size: 10px; line-height: 1; }
.mine-pub-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9aa1ad; font-size: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.mine-pub-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mine-pub-actions { display: flex; gap: 8px; padding: 0 10px 10px 88px; }
.mine-pub-edit { height: 28px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffd868, #ffc229); color: #2f2400; font-size: 11px; font-weight: 800; }
.mine-pub-edit.secondary { background: rgba(241,243,247,.98); color: #5f6572; border: 1px solid rgba(60,60,67,.1); }
.publish-contact-hint { display: grid; gap: 10px; padding: 14px 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,248,221,.92), rgba(255,241,189,.84)); border: 1px solid rgba(255,214,97,.34); box-shadow: 0 10px 20px rgba(255,184,25,.08); }
.publish-contact-hint.inline { margin-top: 2px; }
.publish-contact-hint p { margin: 0; font-size: 13px; color: #5f4a10; }
.publish-contact-cta { width: fit-content; height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, #ffd868, #ffc229); color: #2f2400; font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px rgba(255,184,25,.14); }
.mine-delete-btn { min-width: 54px; padding: 0 10px; border-radius: 16px; align-self: center; background: rgba(255,244,239,.95); color: #c15d36; border: 1px solid rgba(255,189,164,.48); box-shadow: 0 6px 14px rgba(15,23,42,.04); }
.mine-delete-btn:active { transform: scale(.97); }
.contact-form-list { display: grid; gap: 10px; }
.contact-form-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,251,.9)); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 10px 20px rgba(15,23,42,.05); }
.contact-form-icon, .contact-sheet-icon { flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 12px; color: #7a5a0b; background: linear-gradient(180deg, rgba(255,234,177,.44), rgba(255,219,127,.26)); }
.contact-form-icon svg, .contact-sheet-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contact-form-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
.contact-form-copy strong { font-size: 13px; color: #20242c; }
.contact-form-copy input { width: 100%; padding: 0; border: 0; background: transparent; font-size: 13px; color: #5f6572; }
.contact-card { padding: 0 !important; }
.contact-trigger { width: 100%; padding: 14px 16px; border-radius: 22px; text-align: left; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,251,.9)); border: 1px solid rgba(255,255,255,.82); box-shadow: 0 10px 20px rgba(15,23,42,.05); }
.contact-trigger-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-trigger h2, .contact-sheet-copy strong { margin: 0; font-size: 15px; }
.contact-trigger p, .contact-sheet-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contact-sheet-mask { position: fixed; inset: 0; z-index: 265; background: rgba(15,18,25,.24); }
.contact-sheet { position: fixed; left: 50%; bottom: 14px; z-index: 266; width: min(calc(100vw - 28px), 388px); transform: translateX(-50%); padding: 14px 16px 18px; border-radius: 26px; background: rgba(249,250,252,.98); box-shadow: 0 24px 54px rgba(15,23,42,.2); border: 1px solid rgba(255,255,255,.86); backdrop-filter: blur(26px) saturate(1.08); }
.contact-sheet-handle { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: rgba(60,60,67,.18); }
.contact-sheet-close { padding: 8px 12px; border-radius: 999px; background: rgba(241,243,247,.96); color: #5f6572; font-size: 12px; font-weight: 700; }
.contact-required-mask { position: fixed; inset: 0; z-index: 320; background: rgba(15,18,25,.24); display: grid; align-items: end; justify-items: center; padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
.contact-required-modal { width: min(calc(100vw - 28px), 388px); padding: 14px 16px 18px; border-radius: 26px; background: rgba(249,250,252,.98); box-shadow: 0 24px 54px rgba(15,23,42,.22); border: 1px solid rgba(255,255,255,.86); backdrop-filter: blur(26px) saturate(1.08); }
.contact-required-handle { width: 42px; height: 5px; margin: 0 auto 10px; border-radius: 999px; background: rgba(60,60,67,.18); }
.contact-required-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.contact-required-cancel { background: rgba(241,243,247,.96) !important; color: #5f6572 !important; border: 1px solid rgba(60,60,67,.08) !important; padding: 10px 0; height: 40px; border-radius: 16px; font-weight: 800; }
.contact-required-go { width: 100%; height: 40px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(180deg, #ffd868, #ffc229) !important; color: #2f2400; font-weight: 800; box-shadow: 0 8px 18px rgba(255,184,25,.14); }
.contact-sheet-list { display: grid; gap: 10px; }
.contact-sheet-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.88); box-shadow: 0 8px 18px rgba(15,23,42,.04); }
.contact-sheet-copy { flex: 1; min-width: 0; }
.contact-sheet-copy p { word-break: break-all; }
.contact-copy-btn { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg, #ffd868, #ffc229); color: #2f2400; font-size: 12px; font-weight: 800; box-shadow: 0 6px 14px rgba(255,184,25,.12); }
.contact-copy-btn:active { transform: scale(.96); }
.detail-actions { gap: 12px; }
.detail-actions > * { flex: 1; }
.toggle-card { text-align: center; color: var(--muted); }
.guide-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.privacy-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-tab { padding: 11px 8px; border-radius: 16px; background: rgba(255,203,61,.14); color: var(--text); font-size: 12px; font-weight: 700; }
.guide-tab.active { background: linear-gradient(180deg, #ffe06f, #ffcc36); color: #3b2a00; }
.guide-card, .guide-steps { display: grid; gap: 12px; }
.guide-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.76); box-shadow: 0 8px 18px rgba(15,23,42,.04); }
.guide-step strong { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffcc36; color: #3b2a00; font-size: 13px; }
.guide-step p, .source-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.error-text { margin: 0; color: #d74d2f; font-size: 13px; }
.is-empty { padding: 28px 18px; border-radius: 22px; text-align: center; background: rgba(255,255,255,.66); color: var(--muted); border: 1px solid rgba(255,255,255,.72); }
.session-main { flex: 1; min-width: 0; }
.session-row { position: relative; overflow: hidden; border-radius: 20px; background: rgba(255,203,61,.1); }
.session-card { position: relative; z-index: 1; width: 100%; border: none; text-align: left; touch-action: pan-y; user-select: none; transition: transform .18s ease, background .18s ease; }
.session-row.swiping .session-card { transition: none; }
.session-delete { position: absolute; right: 0; top: 0; bottom: 0; width: 72px; border-radius: 0 20px 20px 0; background: #ff4d4f; color: #fff; font-weight: 800; opacity: 0; pointer-events: none; transform: translateX(100%); transition: opacity .18s ease, transform .18s ease; z-index: 0; }
.session-card:active { transform: translateX(-8px); background: rgba(255,203,61,.2); }
.session-row.reveal .session-card, .session-row.reveal .session-card:active { transform: translateX(-76px); }
.session-row.reveal .session-delete { opacity: 1; pointer-events: auto; transform: translateX(0); }
.session-card.active { background: rgba(255,203,61,.22); }
.session-thumb { width: 68px; height: 68px; border-radius: 16px; flex: none; }
.system-notice { display: grid; position: sticky; top: 84px; z-index: 120; gap: 4px; margin-bottom: 2px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,224,111,.96), rgba(255,204,54,.92)); box-shadow: 0 10px 22px rgba(255,184,25,.14); color: #3b2a00; }
.system-notice strong, .system-notice p { margin: 0; }
.system-notice p { color: rgba(59,42,0,.82); font-size: 12px; line-height: 1.5; }
.chat-page { height: min(680px, calc(100vh - 210px)); min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.chat-page > .section-head, .chat-page > .appointment-row, .chat-page > .chat-composer { flex: none; }
.message-list { display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; gap: 12px; padding: 4px 6px 10px; touch-action: pan-y; scrollbar-width: thin; }
.message-list::before { content: ""; margin-top: auto; }
.message-row { display: flex; align-items: flex-start; gap: 8px; }
.message-row.self { flex-direction: row-reverse; }
.chat-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, #ffe06f, #ffb627); color: #3b2a00; font-weight: 800; }
.chat-avatar.other { background: linear-gradient(135deg, #d9e7ff, #7aa7ff); color: #17305f; }
.message-pack { position: relative; max-width: 78%; }
.message-bubble { display: block; width: fit-content; max-width: 100%; padding: 12px 14px; border-radius: 18px 18px 18px 6px; text-align: left; background: rgba(255,203,61,.1); }
.message-row.self .message-bubble { margin-left: auto; border-radius: 18px 18px 6px 18px; background: rgba(77,141,255,.14); }
.message-bubble p, .message-bubble time { margin: 0; }
.message-bubble time { display: block; margin-top: 8px; }
.msg-actions { position: absolute; top: -38px; left: 0; z-index: 10; display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: rgba(33,33,33,.92); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.message-row.self .msg-actions { left: auto; right: 0; }
.msg-actions button { color: #fff; font-size: 12px; padding: 4px 7px; white-space: nowrap; }
.quoted-msg { display: block; margin-bottom: 8px; padding: 6px 8px; border-left: 3px solid rgba(55,71,60,.28); border-radius: 8px; background: rgba(255,255,255,.58); color: var(--muted); font-size: 12px; }
.chat-image { max-width: 180px; height: 140px; border-radius: 14px; }
.composer { align-items: stretch; gap: 12px; }
.chat-composer { display: grid; grid-template-columns: 1fr 36px 36px; align-items: center; gap: 8px; }
.chat-input-wrap, .quote-preview, .emoji-panel { grid-column: 1 / -1; }
.chat-input-wrap { position: relative; grid-column: 1 / 2; }
.chat-input-wrap input { padding-right: 42px; }
.chat-tool-btn, .send-icon-btn, .emoji-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,203,61,.16); color: var(--text); font-size: 18px; font-weight: 800; }
.send-icon-btn { background: linear-gradient(180deg, #ffe170, #ffc928); color: #332500; }
.emoji-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; }
.quote-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(24,39,30,.06); font-size: 12px; color: var(--muted); }
.emoji-panel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.88); }
.emoji-panel button { font-size: 20px; }
.forward-sheet { position: fixed; inset: 0; z-index: 260; display: grid; align-items: end; background: rgba(0,0,0,.28); }
.forward-panel { width: min(calc(100vw - 28px), 390px); margin: 0 auto max(18px, env(safe-area-inset-bottom)); padding: 16px; border-radius: 24px; background: rgba(255,253,247,.98); box-shadow: 0 20px 48px rgba(0,0,0,.22); }
.upload-box { display: grid; justify-items: center; gap: 6px; padding: 20px; border: 1px dashed rgba(29,53,39,.18); border-radius: 22px; background: rgba(24,39,30,.03); text-align: center; }
.upload-input { display: none; }
.upload-preview { position: relative; }
.upload-preview img { height: 92px; border-radius: 18px; }
.remove-image-btn { position: absolute; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 999px; background: rgba(20,20,20,.82); color: #fff; font-size: 18px; line-height: 1; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.unread-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.stat-pill { flex: 1; text-align: center; }
.stat-pill strong { font-size: 22px; }
.stat-link { cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.stat-link:active { transform: scale(.985); background: rgba(255,203,61,.18); box-shadow: inset 0 0 0 1px rgba(255,184,25,.18); }
.bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 200; transform: translateX(-50%); width: min(calc(100vw - 36px), 420px); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 28px 28px; background: linear-gradient(180deg, rgba(255, 247, 212, 0.96), rgba(255, 242, 189, 0.94)); border: 1px solid rgba(255, 226, 136, 0.72); box-shadow: 0 -8px 22px rgba(180, 132, 18, 0.12), inset 0 1px 0 rgba(255,255,255,.84); backdrop-filter: blur(26px) saturate(1.08); }
.bottom-nav button { flex: 1; min-width: 0; padding: 8px 0 7px; border-radius: 16px; display: grid; justify-items: center; gap: 5px; color: #7a6a3f; font-size: 10px; font-weight: 600; background: rgba(255, 239, 178, 0.78); transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.bottom-nav button.active { color: #3a2a00; background: linear-gradient(180deg, #ffc13a, #ffac10); box-shadow: inset 0 0 0 1px rgba(219, 151, 0, 0.42); }
.bottom-nav button:active { transform: scale(.985); }
.input-unit-wrap { position: relative; display: flex; align-items: center; }
.input-unit-wrap input { padding-right: 34px; }
.input-unit-wrap em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a7a56; font-style: normal; font-size: 12px; pointer-events: none; }
.nav-ico { width: 22px; height: 22px; display: block; overflow: visible; }
.nav-outline { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-solid { display: none; fill: #ffc928; filter: drop-shadow(0 2px 2px rgba(255,184,25,.2)); }
.nav-solid-mark { display: none; fill: none; stroke: #3b2a00; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav button.active .nav-outline { display: block; }
.bottom-nav button.active .nav-solid, .bottom-nav button.active .nav-solid-mark { display: none; }
@media (max-width: 480px) { .app-shell { padding: 0 0 110px; } .miniapp-frame { width: 100%; height: 100vh; padding: 0 14px; border-radius: 0; } .topbar { width: 100vw; padding: 14px 14px 8px; border-radius: 0 0 20px 20px; } .page-view { padding-top: 78px; padding-bottom: 120px; } .home-page { padding-top: 150px; } .bottom-nav { width: 100vw; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0 0 28px 28px; } .search-card, .detail-actions, .composer, .seller-row, .seller-main { flex-direction: column; align-items: stretch; } .publish-btn, .ghost-wide, .chat-btn, .detail-link-btn { width: 100%; } .form-grid, .spec-grid, .toggle-grid, .thumb-strip { grid-template-columns: 1fr; } .product-list { gap: 10px; } .product-card { padding: 7px; border-radius: 18px; } .thumb-wrap, .thumb-image { border-radius: 14px; } .thumb-image { height: 128px; } .product-body h3 { min-height: 34px; font-size: 12.5px; } .product-card .price-line strong { font-size: 18px; } .detail-cover { height: 186px; border-radius: 16px; } .thumb-mini { border-radius: 12px; } .thumb-mini img { height: 54px; } .profile-head { flex-direction: row; align-items: center; } }
@media (max-width: 480px) { .dynamic-island { top: 17px; width: 70px; height: 20px; } }
@media (max-width: 480px) { .home-search-card { top: 98px; width: calc(100vw - 28px); flex-direction: row; align-items: center; } .filter-panel { top: 146px; width: calc(100vw - 28px); } .filter-scrim { inset: 140px 0 0; } .home-search-card .filter-toggle-btn { width: auto; } }
@media (max-width: 480px) { .product-card .seller-row, .product-card .seller-main { flex-direction: row; align-items: center; } .product-card .seller-main { min-width: 0; } .product-card .chat-btn, .product-card .detail-link-btn { width: auto; flex: none; } }
@media (max-width: 480px) { .chat-page { height: calc(100vh - 222px); min-height: 0; } .chat-composer { display: grid; grid-template-columns: 1fr 36px 36px; align-items: center; } }
@media (max-width: 480px) { .publish-item { flex-direction: column; } .publish-delete-btn { width: 100%; } .system-notice { top: 80px; } }
@media (max-width: 480px) { .preview-screen { padding: 10px; } .preview-image-button { width: 100%; border-radius: 22px; } .preview-phone { height: calc(100vh - 28px); padding: 44px 22px 28px; border-radius: 34px; } .preview-logo-wrap { width: min(62%, 204px); margin-top: 0; border-radius: 28px; } .preview-enter-btn { height: 48px; width: min(100%, 208px); } .preview-copy { gap: 8px; } .preview-copy h1 { font-size: 34px; } .preview-kicker { font-size: 12px; } .preview-copy p { font-size: 13px; line-height: 1.65; } }