/* HezoKorea theme — system preference + manual light/dark/system toggle */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --c-body: #faf9f7;
  --c-text: #0f172a;
  --c-text-muted: #334155;
  --c-text-soft: #64748b;

  --c-cream: 250 249 247;
  --c-cream-dark: 241 240 237;
  --c-surface: 255 255 255;

  --c-nav-bg: rgba(255, 255, 255, 0.72);
  --c-nav-border: rgba(15, 23, 42, 0.06);

  --c-glass-bg: rgba(255, 255, 255, 0.65);
  --c-glass-border: rgba(255, 255, 255, 0.8);
  --c-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --c-card-hover-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
  --c-prose-code-bg: #f1f0ed;
  --c-prose-heading: #0f172a;

  --c-hero-glow-a: rgba(124, 140, 219, 0.12);
  --c-hero-glow-b: rgba(37, 99, 235, 0.08);
  --c-hero-glow-c: rgba(124, 140, 219, 0.06);

  --c-process-num-bg: rgba(124, 140, 219, 0.2);
  --c-process-num-text: #a5b0e8;
  --c-process-num-border: rgba(165, 176, 232, 0.35);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --c-body: #0c1222;
  --c-text: #f1f5f9;
  --c-text-muted: #cbd5e1;
  --c-text-soft: #94a3b8;

  --c-cream: 30 41 59;
  --c-cream-dark: 51 65 85;
  --c-surface: 30 41 59;

  --c-nav-bg: rgba(15, 23, 42, 0.82);
  --c-nav-border: rgba(148, 163, 184, 0.12);

  --c-glass-bg: rgba(30, 41, 59, 0.72);
  --c-glass-border: rgba(148, 163, 184, 0.12);
  --c-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(148, 163, 184, 0.08);

  --c-card-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --c-prose-code-bg: #334155;
  --c-prose-heading: #f1f5f9;

  --c-hero-glow-a: rgba(124, 140, 219, 0.18);
  --c-hero-glow-b: rgba(37, 99, 235, 0.14);
  --c-hero-glow-c: rgba(124, 140, 219, 0.1);

  --c-process-num-bg: rgba(124, 140, 219, 0.25);
  --c-process-num-text: #c7d2fe;
  --c-process-num-border: rgba(165, 176, 232, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --c-body: #0c1222;
    --c-text: #f1f5f9;
    --c-text-muted: #cbd5e1;
    --c-text-soft: #94a3b8;

    --c-cream: 30 41 59;
    --c-cream-dark: 51 65 85;
    --c-surface: 30 41 59;

    --c-nav-bg: rgba(15, 23, 42, 0.82);
    --c-nav-border: rgba(148, 163, 184, 0.12);

    --c-glass-bg: rgba(30, 41, 59, 0.72);
    --c-glass-border: rgba(148, 163, 184, 0.12);
    --c-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(148, 163, 184, 0.08);

    --c-card-hover-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --c-prose-code-bg: #334155;
    --c-prose-heading: #f1f5f9;

    --c-hero-glow-a: rgba(124, 140, 219, 0.18);
    --c-hero-glow-b: rgba(37, 99, 235, 0.14);
    --c-hero-glow-c: rgba(124, 140, 219, 0.1);

    --c-process-num-bg: rgba(124, 140, 219, 0.25);
    --c-process-num-text: #c7d2fe;
    --c-process-num-border: rgba(165, 176, 232, 0.4);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--c-body);
  color: var(--c-text);
}

/* Tailwind utility remapping for surfaces & text */
.bg-white { background-color: rgb(var(--c-surface)) !important; }
.hover\:bg-white:hover { background-color: rgb(var(--c-surface)) !important; }
.focus\:bg-white:focus { background-color: rgb(var(--c-surface)) !important; }

.text-ink { color: var(--c-text) !important; }
.text-ink-muted { color: var(--c-text-muted) !important; }
.text-ink-soft { color: var(--c-text-soft) !important; }
.hover\:text-ink:hover { color: var(--c-text) !important; }

.border-cream-dark { border-color: rgb(var(--c-cream-dark)) !important; }
.divide-cream-dark > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-cream-dark)) !important; }

/* Shared components */
.nav-pill {
  background: var(--c-nav-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--c-nav-border);
}

.glass-panel {
  background: var(--c-glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-glass-border);
  box-shadow: var(--c-glass-shadow);
}

.hero-glow {
  background:
    radial-gradient(ellipse 70% 50% at 20% 40%, var(--c-hero-glow-a), transparent),
    radial-gradient(ellipse 50% 40% at 80% 20%, var(--c-hero-glow-b), transparent),
    radial-gradient(ellipse 40% 30% at 60% 80%, var(--c-hero-glow-c), transparent);
}

.bento-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--c-card-hover-shadow); }

.guide-prose ul, .guide-prose ol { margin-top: 0.5rem; }
.guide-prose li { margin-top: 0.25rem; }
.guide-prose h3 { color: var(--c-prose-heading); font-weight: 700; }
.guide-prose a { color: #2563eb; }
.guide-prose a:hover { text-decoration: underline; }
.guide-prose code {
  font-size: 0.85em;
  background: var(--c-prose-code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
}
.guide-prose table { font-size: 0.875rem; }

details summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Theme toggle */
.theme-toggle-btn { position: relative; }
.theme-toggle-panel { min-width: 10.5rem; }
.theme-opt[aria-selected="true"] { font-weight: 600; color: var(--c-text); background: rgb(var(--c-cream) / 0.65); }
.theme-opt[aria-selected="true"] .theme-opt-check { opacity: 1; }
.theme-opt-check { opacity: 0; color: #2563eb; }

/* Logo: swap to light variant on dark backgrounds */
.site-logo-dark { display: none; }

:root[data-theme="dark"] .site-logo-light,
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .site-logo-dark,
:root[data-theme="dark"] .theme-icon-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .site-logo-light,
  :root[data-theme="system"] .theme-icon-light { display: none; }
  :root[data-theme="system"] .site-logo-dark,
  :root[data-theme="system"] .theme-icon-dark { display: block; }
}

.theme-icon-dark { display: none; }

/* Dark-mode-only UI tweaks */
:root[data-theme="dark"] .ham span { background-color: var(--c-text) !important; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .ham span { background-color: var(--c-text) !important; }
}

:root[data-theme="dark"] .text-red-700 { color: #fca5a5 !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .text-red-700 { color: #fca5a5 !important; }
}

:root[data-theme="dark"] .bg-red-50 { background-color: rgba(127, 29, 29, 0.35) !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .bg-red-50 { background-color: rgba(127, 29, 29, 0.35) !important; }
}

:root[data-theme="dark"] .border-red-100 { border-color: rgba(248, 113, 113, 0.25) !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .border-red-100 { border-color: rgba(248, 113, 113, 0.25) !important; }
}

:root[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .text-emerald-700 { color: #6ee7b7 !important; }
}

:root[data-theme="dark"] .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.35) !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.35) !important; }
}

:root[data-theme="dark"] .border-emerald-100 { border-color: rgba(52, 211, 153, 0.25) !important; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .border-emerald-100 { border-color: rgba(52, 211, 153, 0.25) !important; }
}

:root[data-theme="dark"] .hero-badge {
  background-color: rgb(var(--c-surface)) !important;
  border-color: rgba(124, 140, 219, 0.25) !important;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .hero-badge {
    background-color: rgb(var(--c-surface)) !important;
    border-color: rgba(124, 140, 219, 0.25) !important;
  }
}


:root[data-theme="dark"] select option { background: #1e293b; color: #f1f5f9; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] select option { background: #1e293b; color: #f1f5f9; }
}

:root[data-theme="dark"] .grain::before { opacity: .04; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .grain::before { opacity: .04; }
}

/* Homepage-only utilities (also safe on other pages) */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.step-line { background: linear-gradient(180deg, #7c8cdb 0%, #2563eb 50%, rgba(37,99,235,.2) 100%); }

.drawer { transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.drawer.open { transform: translateX(0); }
.overlay { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.overlay.open { opacity: 1; visibility: visible; }

.hero-title { font-size: clamp(2rem, 5.5vw + 0.5rem, 3.35rem); letter-spacing: -0.035em; line-height: 1.06; }
.hero-dynamic { display: inline-block; min-width: 7.5ch; transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.hero-dynamic.out { opacity: 0; transform: translateY(10px); }

.process-timeline { counter-reset: proc-step; }
.process-step { position: relative; }
.process-step::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(165,176,232,.35), rgba(37,99,235,.55));
}
.process-step:not(:last-child)::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  border: solid rgba(165,176,232,.9); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); width: 8px; height: 8px;
}
@media (min-width: 1024px) {
  .process-step:not(:last-child)::before { top: 2.75rem; left: calc(50% + 1.75rem); right: calc(-50% + 1.75rem); height: 2px; }
  .process-step:not(:last-child)::after { top: 2.35rem; right: -4px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .process-step:nth-child(odd):not(:last-child)::before { top: 2.75rem; left: calc(50% + 1.75rem); width: calc(100% - 3.5rem); height: 2px; }
  .process-step:nth-child(odd):not(:last-child)::after { top: 2.35rem; right: 0; }
  .process-step:nth-child(even)::before { top: -1.25rem; left: 50%; width: 2px; height: 1.25rem; background: linear-gradient(180deg, rgba(165,176,232,.35), rgba(37,99,235,.55)); }
  .process-step:nth-child(even)::after { top: -6px; left: calc(50% - 4px); transform: rotate(45deg); }
}
@media (max-width: 639px) {
  .process-step:not(:last-child)::before { top: auto; bottom: -0.65rem; left: 50%; width: 2px; height: 0.65rem; background: linear-gradient(180deg, rgba(165,176,232,.35), rgba(37,99,235,.55)); }
  .process-step:not(:last-child)::after { bottom: -10px; left: calc(50% - 4px); transform: rotate(45deg); }
}
.process-num {
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; letter-spacing: .02em;
  background: var(--c-process-num-bg);
  color: var(--c-process-num-text);
  border: 1px solid var(--c-process-num-border);
}
.process-step.is-final .process-num { background: rgba(37,99,235,.25); color: #fff; border-color: rgba(124,140,219,.5); }

.proxy-extra, .doc-extra { grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.proxy-extra.open, .doc-extra.open { grid-template-rows: 1fr; }
.proxy-extra > div, .doc-extra > div { overflow: hidden; }

.dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.dropdown-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

.doc-card[open] summary .doc-chevron { transform: rotate(180deg); }
.doc-card summary { list-style: none; }
.doc-card summary::-webkit-details-marker { display: none; }

.cat-hint { display: none; }
.cat-hint.active { display: block; animation: rise .35s ease forwards; }

.form-done { display: none; }
.form-done.show { display: block; animation: rise .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ham span { transition: transform .3s, opacity .3s; }
.ham.on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ham.on span:nth-child(2) { opacity: 0; }
.ham.on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.marquee-viewport {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-inner {
  --marquee-gap: 2.75rem;
  --marquee-logo-height: 28px;
  --marquee-logo-max-width: 108px;
  --marquee-duration: 50s;
  --marquee-shift: 50%;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.marquee-viewport:hover .marquee-inner {
  animation-play-state: paused;
}
.marquee-set {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--marquee-shift)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { --marquee-duration: 120s; }
}
@supports not (transform: translate3d(0, 0, 0)) {
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--marquee-shift))); }
  }
}
.store-logo {
  height: var(--marquee-logo-height);
  width: auto;
  max-width: var(--marquee-logo-max-width);
  max-height: var(--marquee-logo-height);
  object-fit: contain;
  object-position: center center;
  display: block;
}
.store-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--marquee-logo-height) + 8px);
  min-width: 4.5rem;
  padding: 0 0.15rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.store-logo-link:hover { opacity: 1; transform: scale(1.04); }
.store-logo-link:focus-visible {
  outline: 2px solid var(--color-accent, #6366f1);
  outline-offset: 3px;
}

#contactForm input:not([type="hidden"]):not(.hidden),
#contactForm select,
#contactForm textarea {
  border: 1px solid rgb(var(--c-cream-dark)) !important;
  background-color: rgb(var(--c-cream)) !important;
}
#contactForm input:not([type="hidden"]):not(.hidden):focus,
#contactForm select:focus,
#contactForm textarea:focus {
  border-color: #2563eb !important;
  background-color: rgb(var(--c-surface)) !important;
}