/* DAINO STORE 공통: 상단 헤더·푸터·스토어 색. 기존 스토어 부품은 daino-app-bridge.css 위에 여기서 보정. */
html body.store-page.store-page {
  --dp-blue: #e9562c;
  --dp-blue-deep: #c2451f;
  --dp-blue-soft: #fff0ea;
  --accent: #e9562c;
  --accent-hover: #c2451f;
  --accent-light: rgba(233, 86, 44, .1);
  --dp-accent: #e9562c;
  --dp-accent-hover: #c2451f;
  --dp-accent-soft: #fff0ea;
  --dv-blue: #e9562c;
  --dv-blue-soft: #fff0ea;
  --dp-bg: #f6f4f1;
  background: #f6f4f1;
}
.brand--store .brand__dot, .brand--store small { color: #e9562c; }

.store-top { position: sticky; top: 0; z-index: 40; padding: 10px 12px 0; }
.store-top__inner { max-width: 1200px; height: 60px; margin: 0 auto; padding: 0 8px 0 16px; display: flex; align-items: center; gap: 20px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--dp-shadow-2); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
.store-top__nav { display: none; gap: 4px; }
.store-top__nav a { padding: 8px 14px; font-size: 15px; font-weight: 600; color: var(--dp-ink-2); border-radius: 999px; transition: background .2s ease, color .2s ease; }
.store-top__nav a:hover { color: var(--dp-ink); background: rgba(15, 23, 42, .04); }
.store-top__nav a.is-active { color: #c2451f; background: #fff0ea; }
.store-top__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.store-top__cross { padding: 8px 12px; font-size: 13px; font-weight: 700; color: #126bff; background: #eaf2ff; border-radius: 999px; }
.store-top__user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #e8edf5; box-shadow: 0 0 0 2px #fff; }
.store-page main { max-width: 1200px; margin: 0 auto !important; padding: 28px var(--gutter) 64px !important; }
.store-foot { border-top: 1px solid var(--dp-line); }
.store-foot__inner { max-width: 1200px; margin: 0 auto; padding: 28px var(--gutter) calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.store-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--dp-ink-2); }
.store-foot small { color: var(--dp-muted); }
@media (min-width: 768px) {
  .store-top__nav { display: flex; }
  .store-foot__inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .store-foot nav { justify-content: center; }
}

/* 기존 스토어(다크) 변수 → 새 테마 */
html body.store-page.store-page {
  --store-bg: #f6f4f1;
  --store-surface: #ffffff;
  --store-surface-soft: #faf8f6;
  --store-surface-raised: #ffffff;
  --store-ink: #0b1220;
  --store-muted: #4a5568;
  --store-line: rgba(15, 23, 42, .08);
  --store-blue: #e9562c;
  --store-blue-dark: #c2451f;
  --store-blue-hover: #0b1220;
  --store-blue-soft: #fff0ea;
  --store-danger: #e5484d;
  --store-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
  color-scheme: light;
  color: var(--dp-ink);
}
html body.store-page.store-page { display: block !important; }
#store-main.app-tool, html body.store-page main#store-main { width: 100%; max-width: 1200px !important; margin: 0 auto !important; padding: 28px var(--gutter) 64px !important; min-height: 0 !important; background: none !important; }
.store-page .download-store { background: none !important; }

/* 상단 소개: 밝은 카드에 주황은 포인트만 */
.store-page .store-hero {
  position: relative; overflow: hidden;
  color: var(--dp-ink) !important; border: 0 !important; border-radius: 28px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf6 60%, #fff3ec 100%) !important;
  box-shadow: var(--dp-shadow-2) !important; padding: clamp(24px, 4vw, 44px) !important;
}
.store-page .store-hero::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 86, 44, .14), transparent 65%); animation: drift 14s ease-in-out infinite alternate; pointer-events: none; }
.store-page .store-hero::after { content: ""; position: absolute; width: 280px; height: 280px; left: 30%; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 107, 255, .08), transparent 65%); animation: drift 16s ease-in-out -5s infinite alternate-reverse; pointer-events: none; }
.store-page .store-hero > * { position: relative; z-index: 1; }
.store-page .store-hero h1, .store-page .store-hero h2 { color: var(--dp-ink) !important; letter-spacing: -.045em; }
.store-page .store-hero p { color: var(--dp-ink-2) !important; opacity: 1; }
.store-page .store-eyebrow { color: #e9562c !important; font-weight: 800 !important; }
/* 검색: 메인 진단 입력과 같은 알약 모양 */
.store-page .store-search {
  position: relative; display: flex !important; align-items: center; gap: 4px; width: 100%; min-height: 60px;
  padding: 6px 6px 6px 18px !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, .1) !important;
  border-radius: 999px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 30px rgba(15, 23, 42, .08) !important;
  transition: border-color .2s ease, box-shadow .25s ease !important;
}
.store-page .store-search:focus-within { border-color: rgba(233, 86, 44, .45) !important; box-shadow: 0 0 0 4px rgba(233, 86, 44, .1), 0 10px 30px rgba(15, 23, 42, .08) !important; }
.store-page .store-search__icon { position: static !important; width: 20px !important; height: 20px !important; flex: none; fill: none; stroke: var(--dp-muted) !important; stroke-width: 2.2; transform: none !important; }
html body.store-page #catalog-search, html body.store-page #catalog-search:focus {
  flex: 1; min-width: 0; height: 48px !important; min-height: 0 !important; padding: 0 8px !important; margin: 0 !important;
  font-size: 16px !important; color: var(--dp-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important;
}
html body.store-page #catalog-search::-webkit-search-cancel-button { display: none; }
.store-page .store-search .store-search__clear { position: static !important; flex: none; width: 32px; height: 32px; color: var(--dp-muted) !important; background: #f1f3f7 !important; border: 0 !important; border-radius: 50% !important; transform: none !important; }
.store-page .store-search .store-search__submit {
  position: static !important; flex: none; min-height: 48px; padding: 0 22px !important; font-weight: 700 !important;
  color: #fff !important; background: var(--dp-ink) !important; border: 0 !important; border-radius: 999px !important; transform: none !important;
  transition: background .2s ease, transform .2s ease !important;
}
.store-page .store-search .store-search__submit:hover { background: #16213a !important; transform: translateY(-1px) !important; }

/* 필터 칩 */
.store-page .store-chips button, .store-page .store-chip {
  color: var(--dp-ink-2) !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, .1) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 700 !important;
}
.store-page .store-chips button[aria-pressed="true"], .store-page .store-chips .is-active, .store-page .store-chip.is-active {
  color: #fff !important; background: var(--dp-ink) !important; border-color: var(--dp-ink) !important;
}
.store-page .store-select-label select, .store-page select { color: var(--dp-ink) !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, .12) !important; border-radius: 12px !important; }

/* 앱 카드: 글 중심 */
.store-page .app-grid, .store-page #catalog-grid { gap: 16px !important; }
.store-page .app-card { position: relative; background: #fff !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--dp-shadow-1) !important; transition: box-shadow .25s ease !important; transform-style: preserve-3d; }
.store-page .app-card:hover { box-shadow: var(--dp-shadow-3) !important; }
.store-page .app-card-link { display: flex !important; flex-direction: column; gap: 14px; height: 100%; padding: 22px !important; color: var(--dp-ink) !important; }
.store-page .app-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 26px; }
.store-page .app-badge { padding: 4px 10px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--dp-ink-2) !important; background: #f1f3f7 !important; border: 0 !important; border-radius: 999px !important; }
.store-page .app-badge--success { color: #0b7a3c !important; background: #e3f6eb !important; }
.store-page .app-card-top { display: flex !important; align-items: center; gap: 14px; padding: 0 !important; border: 0 !important; }
.store-page .app-icon { display: grid !important; place-items: center; width: 52px !important; height: 52px !important; flex: none; font-size: 20px !important; font-weight: 800 !important; color: #c2451f !important; background: #fff0ea !important; border: 0 !important; border-radius: 16px !important; }
.store-page .app-card h3 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--dp-ink) !important; letter-spacing: -.03em; }
.store-page .app-card-category { margin: 2px 0 0 !important; font-size: 13px !important; color: var(--dp-muted) !important; }
.store-page .app-card-description { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--dp-ink-2) !important; }
.store-page .app-card-roles { padding: 14px 16px; background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: 16px; }
.store-page .app-card-roles__label { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 800 !important; color: var(--dp-muted) !important; }
.store-page .app-card-roles ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.store-page .app-card-roles li { position: relative; padding-left: 22px; font-size: 14px; font-weight: 600; color: var(--dp-ink); }
.store-page .app-card-roles li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff0ea; box-shadow: inset 0 0 0 4px #e9562c; }
.store-page .app-card-footer { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px !important; border-top: 1px solid var(--dp-line) !important; }
.store-page .app-card-meta { font-size: 13px !important; color: var(--dp-muted) !important; }
.store-page .app-card-download { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px !important; font-size: 14px !important; font-weight: 700 !important; color: #fff !important; background: var(--dp-ink) !important; border: 0 !important; border-radius: 12px !important; transition: transform .2s ease; }
.store-page .app-card:hover .app-card-download:not(.app-card-download--soon) { transform: translateX(2px); }

/* 준비 중: 눈에 띄게 */
.store-page .app-card.is-soon { background: repeating-linear-gradient(135deg, #ffffff 0 14px, #fbfaf8 14px 28px) !important; box-shadow: 0 0 0 2px #f2c94c inset, var(--dp-shadow-1) !important; }
.store-page .app-soon-badge { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; font-size: 14px; font-weight: 800; color: #5c4200; background: #ffd84d; border-radius: 999px; box-shadow: 0 6px 16px rgba(242, 201, 76, .45); }
.store-page .app-soon-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5c4200; animation: soonPulse 1.6s ease-in-out infinite; }
.store-page .app-soon-note { font-size: 12.5px; font-weight: 600; color: #8a6a00; }
.store-page .app-card.is-soon .app-icon { color: #8a6a00 !important; background: #fff4cc !important; }
.store-page .app-card.is-soon .app-card-roles li::before { background: #fff4cc; box-shadow: inset 0 0 0 4px #f2c94c; }
.store-page .app-card-download--soon { color: #8a6a00 !important; background: #fff4cc !important; }
@keyframes soonPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* 상세 */
.store-page .store-detail, .store-page .store-detail * { border-color: var(--dp-line); }
.store-page .store-detail [class*="panel"], .store-page .store-detail [class*="card"], .store-page .store-detail section { background: #fff; color: var(--dp-ink); }

/* 설치 가이드 문서 */
.store-page .guide-shell { max-width: 880px !important; margin: 0 auto !important; display: grid; gap: 18px; }
.store-page .guide-body { display: grid; gap: 18px; color: var(--dp-ink) !important; }
.store-page .guide-doc-pager { display: none !important; }

/* 가이드 전환 탭 */
.store-guide-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; background: #ece8e3; border-radius: 16px; scrollbar-width: none; }
.store-guide-tabs::-webkit-scrollbar { display: none; }
.store-guide-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--dp-ink-2); border-radius: 12px; transition: background .2s ease, color .2s ease; }
.store-guide-tab:hover { color: var(--dp-ink); }
.store-guide-tab.is-active { color: var(--dp-ink); background: #fff; box-shadow: var(--dp-shadow-1); }
.store-guide-tab__soon { padding: 2px 8px; font-size: 11.5px; font-weight: 800; color: #5c4200; background: #ffd84d; border-radius: 999px; }

/* 머리말 */
.store-page .guide-doc-head { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 40px) !important; color: var(--dp-ink) !important; background: linear-gradient(135deg, #ffffff 0%, #fffaf6 70%, #fff3ec 100%) !important; border: 0 !important; border-radius: 28px !important; box-shadow: var(--dp-shadow-2) !important; }
.store-page .guide-doc-head::after { content: ""; position: absolute; width: 300px; height: 300px; right: -110px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(233, 86, 44, .13), transparent 65%); pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
.store-page .guide-doc-head > * { position: relative; z-index: 1; }
.store-page .guide-doc-eyebrow { font-size: 13px !important; font-weight: 800 !important; color: #e9562c !important; letter-spacing: 0 !important; text-transform: none !important; }
.store-page .guide-panel-title { margin-top: 6px !important; font-size: clamp(28px, 5vw, 40px) !important; font-weight: 800 !important; color: var(--dp-ink) !important; letter-spacing: -.045em !important; }
.store-page .guide-panel-desc { margin-top: 10px !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--dp-ink-2) !important; }
.store-page .guide-panel-desc strong { color: var(--dp-ink) !important; }
.store-page .guide-download-cta { display: inline-flex !important; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px 12px 20px !important; color: #fff !important; background: var(--dp-ink) !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 10px 22px rgba(11, 18, 32, .22) !important; transition: transform .2s ease, box-shadow .25s ease !important; }
.store-page .guide-download-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(11, 18, 32, .28) !important; }
.store-page .guide-download-cta__label { font-weight: 800 !important; color: #fff !important; }
.store-page .guide-download-cta__hint { font-size: 13px !important; color: rgba(255, 255, 255, .7) !important; }
.store-page .guide-download-cta__arrow { display: grid; place-items: center; width: 32px; height: 32px; color: #fff !important; background: #e9562c !important; border-radius: 10px; }

/* 본문 공통 */
.store-page .guide-article { display: grid; gap: 16px; color: var(--dp-ink) !important; }
.store-page .guide-article p, .store-page .guide-article li, .store-page .guide-text { color: var(--dp-ink-2) !important; line-height: 1.75 !important; }
.store-page .guide-article strong { color: var(--dp-ink) !important; }
.store-page .guide-article a, .store-page .guide-wiki-link { color: #c2451f !important; text-decoration: underline; text-decoration-color: rgba(194, 69, 31, .35); text-underline-offset: 3px; }
.store-page .guide-hl { padding: 1px 6px !important; color: #c2451f !important; background: #fff0ea !important; border-radius: 6px !important; }
.store-page .guide-ui { padding: 2px 8px !important; font-size: .92em; font-weight: 700 !important; color: var(--dp-ink) !important; background: #fff !important; border: 1px solid rgba(15, 23, 42, .14) !important; border-radius: 8px !important; box-shadow: 0 1px 0 rgba(15, 23, 42, .08) !important; }

/* 한눈에 보기 */
.store-page .guide-at-a-glance { padding: 24px !important; background: #fff !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--dp-shadow-1) !important; }
.store-page .guide-at-a-glance-label { margin: 0 0 12px !important; padding: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: var(--dp-ink) !important; border: 0 !important; }
.store-page .guide-at-a-glance-steps { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: glance; }
.store-page .guide-at-a-glance-steps li { position: relative; padding: 12px 14px 12px 52px !important; color: var(--dp-ink) !important; background: var(--dp-surface-2); border: 1px solid var(--dp-line); border-radius: 14px; counter-increment: glance; }
.store-page .guide-at-a-glance-steps li::before { content: counter(glance); position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; font-size: 13px; font-weight: 800; color: #fff; background: var(--dp-ink); border-radius: 9px; }
.store-page .guide-at-a-glance-note { margin-top: 12px !important; font-size: 14px !important; }

/* 섹션 */
.store-page .guide-section { padding: 26px !important; background: #fff !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--dp-shadow-1) !important; }
.store-page .guide-section + .guide-section { margin-top: 0 !important; }
.store-page .guide-section-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; font-size: 20px !important; font-weight: 800 !important; color: var(--dp-ink) !important; letter-spacing: -.03em; }
.store-page .guide-section-num { display: grid !important; place-items: center; width: 34px; height: 34px; flex: none; font-size: 14px !important; font-weight: 800 !important; color: #c2451f !important; background: #fff0ea !important; border: 0 !important; border-radius: 11px !important; }
.store-page .guide-keypoint { padding: 12px 16px !important; color: var(--dp-ink) !important; background: #f4f7ff !important; border: 0 !important; border-left: 0 !important; border-radius: 14px !important; }
.store-page .guide-quote { padding: 12px 16px !important; color: var(--dp-ink-2) !important; background: var(--dp-surface-2) !important; border: 0 !important; border-left: 3px solid #e9562c !important; border-radius: 0 12px 12px 0 !important; }
.store-page .guide-list { padding-left: 20px !important; }
.store-page .guide-list li::marker { color: #e9562c; }
.store-page .guide-zone-label { color: var(--dp-muted) !important; font-weight: 800 !important; }

/* 단계 */
.store-page .guide-steps { display: grid; gap: 10px; padding: 0 !important; }
.store-page .guide-steps > li, .store-page .guide-step { padding: 16px 18px !important; background: var(--dp-surface-2) !important; border: 1px solid var(--dp-line) !important; border-left: 1px solid var(--dp-line) !important; border-radius: 16px !important; box-shadow: none !important; }
.store-page .guide-step-title { color: var(--dp-ink) !important; font-weight: 800 !important; }
.store-page .guide-step-desc { color: var(--dp-ink-2) !important; }

/* 안내 박스 */
.store-page .guide-callout { padding: 18px 20px !important; color: var(--dp-ink-2) !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; }
.store-page .guide-callout--info { background: #eef4ff !important; }
.store-page .guide-callout--warn { background: #fff6dc !important; }
.store-page .guide-callout-title { display: block; margin-bottom: 4px; font-weight: 800 !important; color: var(--dp-ink) !important; }

/* 표 */
.store-page .guide-table-wrap { overflow-x: auto; border: 1px solid var(--dp-line); border-radius: 16px; }
.store-page .guide-table { width: 100%; border-collapse: collapse; background: #fff !important; }
.store-page .guide-table th, .store-page .guide-table td { padding: 12px 14px !important; color: var(--dp-ink) !important; background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--dp-line) !important; text-align: left; }
.store-page .guide-table th { font-size: 13px; color: var(--dp-muted) !important; background: var(--dp-surface-2) !important; }

/* 스크린샷 */
.store-page .guide-media { padding: 14px !important; background: #fff !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--dp-shadow-2) !important; }
.store-page .guide-media-shoot, .store-page .guide-media-shoot-title { color: var(--dp-ink) !important; background: var(--dp-surface-2) !important; border: 0 !important; border-radius: 12px !important; }
.store-page .guide-media img, .store-page .guide-media video { border-radius: 14px !important; }
.store-page .guide-media-caption { color: var(--dp-muted) !important; }
.store-page .guide-media-badge { color: #c2451f !important; background: #fff0ea !important; border: 0 !important; }

/* FAQ */
.store-page .guide-faq { padding: 8px 0 !important; background: #fff !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--dp-shadow-1) !important; }
.store-page .guide-faq dt, .store-page .guide-faq summary { color: var(--dp-ink) !important; font-weight: 800 !important; }
.store-page .guide-faq dd { color: var(--dp-ink-2) !important; }
.store-page .guide-faq dt, .store-page .guide-faq dd { padding-left: 22px !important; padding-right: 22px !important; }

/* 준비 중 가이드 */
.store-page[data-guide-page="cafe"] .guide-doc-head,
.store-page[data-guide-page="place-agent"] .guide-doc-head { box-shadow: 0 0 0 2px #f2c94c inset, var(--dp-shadow-2) !important; }
.store-page[data-guide-page="cafe"] .guide-panel-title::after,
.store-page[data-guide-page="place-agent"] .guide-panel-title::after { content: "준비 중"; display: inline-flex; align-items: center; margin-left: 12px; padding: 6px 14px; font-size: 15px; letter-spacing: 0; vertical-align: middle; color: #5c4200; background: #ffd84d; border-radius: 999px; box-shadow: 0 6px 16px rgba(242, 201, 76, .45); }
.store-page[data-guide-page="cafe"] .guide-callout--info,
.store-page[data-guide-page="place-agent"] .guide-callout--info { background: #fff6dc !important; box-shadow: 0 0 0 1px #f2c94c inset !important; }
.store-page .store-tool { width: 100%; }
.store-page .guide-section-title { padding: 0 !important; background: none !important; border: 0 !important; border-left: 0 !important; box-shadow: none !important; }
.store-page .guide-section-title::before, .store-page .guide-section-title::after { display: none !important; }