/* ══════════════════════════════════════════════════════════
   FINSIDE — shared stylesheet (index.html + about.html)
   ══════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent: #c8f0e8;   /* soft mint-white — scientific, not neon */
  --accent2: #7ee8c8;  /* brighter mint — use sparingly */
  --bg: #0e0e0e;
  --text: #e8e4dc;
  --text-dim: #e8e4dc55;
  --text-mid: #e8e4dc99;
}

@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Thin.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'SUIT';
  src: url('assets/fonts/SUIT-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  height: 100%;
}

html, body {
  width: 100%;
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
}

/* per-page theme (index = dark hero page, about = light page) */
body.page-index {
  height: 100%;
  background: var(--bg);
  color: var(--text);
}
body.page-about {
  background: white;
  color: #4a453d;
}
body.page-domain-beauty {
  background: #ffffff;
}

/* ── nav (shared by both pages) ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: backdrop-filter 0.35s, background 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: #ffffffcc;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: #1a1a1a10;
}
nav * { pointer-events: auto; }
#nav-inner {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(56px, 5vw, 120px);
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
nav .nav-logo { margin-bottom: 0; }
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  color: #17181c;
  text-decoration: none;
  font-size: 14px; letter-spacing: 0.1em; font-weight: 400;
  transition: color 0.35s;
}
.nav-links a.active { color: #8a6a4a; font-weight: 600; }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  list-style: none;
  background: #fffdf9;
  border-radius: 12px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -20px #2a251f2e;
  padding: 10px;
  min-width: 140px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.nav-dropdown-menu li { padding: 0; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  color: #4a453d;
  font-size: 14px;
}
.nav-dropdown-menu a:hover { background: #ede7db; }
.nav-dropdown-menu a.active { color: #8a6a4a; font-weight: 600; }

@media (min-width: 901px) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

#nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
#nav-toggle span {
  display: block;
  width: 100%; height: 2px;
  background: #17181c;
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
nav.nav-open #nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open #nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open #nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#nav-scrim {
  visibility: hidden;
  position: fixed;
  inset: 0;
  background: #1a1712a3;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s, visibility 0.25s;
}
/* #nav-scrim.nav-open { visibility: visible; opacity: 1; transition: opacity 0.25s; } */

@media (max-width: 900px) {
  #nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    bottom: 0;
    height: 100dvh;
    width: 100%;
    background: #fffdf9;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 88px 32px 32px;
    box-shadow: -20px 0 40px -20px #2a251f2e;
    z-index: 100;
    overflow-y: auto;
    display: none;
  }
  nav.nav-open .nav-links { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 0; font-size: 14px; }

  .nav-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
    display: block;
  }
  .nav-dropdown-menu a { padding: 10px; }
}

@media (max-width: 480px) {
  #nav-inner { padding: 14px 16px; }
  .nav-logo-img { height: 26px; }
  .nav-links { gap: 12px; }
}

/* ── shared: contact modal (partials/header.js) ── */
#contact-modal-overlay {
  position: fixed;
  inset: 0;
  background: #1a1712a3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
#contact-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#contact-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fffdf9;
  border-radius: 16px;
  padding: 40px clamp(24px, 4vw, 44px);
  box-shadow: 0 30px 60px -20px #2a251f4a;
  transform: translateY(12px);
  transition: transform 0.25s;
}
#contact-modal-overlay.open #contact-modal { transform: translateY(0); }

#contact-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: #6b6259;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}
#contact-modal-close:hover { background: #ede7db; }

#contact-modal-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: #2a2520;
  margin-bottom: 8px;
}
#contact-modal-sub {
  font-size: 14px;
  color: #6b6259;
  line-height: 1.6;
  margin-bottom: 28px;
}

.contact-field { margin-bottom: 18px; }
.contact-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4a453d;
  margin-bottom: 8px;
}
.contact-field .req { color: #b0553f; }
.contact-field .opt { color: #a39a8c; font-weight: 400; }
.contact-field input,
.contact-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ded5c4;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #2a2520;
  background: #fff;
  transition: border-color 0.2s;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #a68a6d;
}
.contact-field textarea { resize: vertical; }

.contact-radio-group {
  display: flex;
  gap: 8px;
}
.contact-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 14px;
  border: 1px solid #ded5c4;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #6b6259;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.contact-radio input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #a68a6d;
  cursor: pointer;
}
.contact-radio:hover {
  border-color: #c9a876;
}
.contact-radio:has(input:checked) {
  border-color: #a68a6d;
  background: #f6f1e9;
  color: #2a2520;
  font-weight: 700;
}

#contact-form-status {
  font-size: 13px;
  min-height: 18px;
  margin: 4px 0 18px;
}
#contact-form-status.error { color: #b0553f; }
#contact-form-status.success { color: #4a7a5a; }

#contact-submit {
  width: 100%;
  text-align: center;
}

@media (max-width: 480px) {
  #contact-modal { padding: 32px 20px; }
}

/* ── shared reveal-on-scroll fade (index.html #domains + about.html sections) ── */
.reveal-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.reveal-fade.revealed { opacity: 1; transform: translateY(0); }

/* ── shared section-inner layout helper (about.html) ── */
.section-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(40px, 8vw, 140px);
}
@media (max-width: 480px) {
  .section-inner { padding: 0 20px; }
}

/* ── shared eyebrow/heading triad (about.html) ── */
.eyebrow {
  font-size: 14px; letter-spacing: 0.28em;
  color: #a68a6d;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.heading {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.3;
  color: #4a453d;
}
.heading b { font-weight: 800; color: #2a2520; }


/* ══════════════════════════════════════════════════════════
   index.html — #hero
   ══════════════════════════════════════════════════════════ */

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: clip;
  padding-top: clamp(80px, 10vh, 140px);
  padding-bottom: clamp(80px, 10vh, 140px);
  box-sizing: border-box;
  height: 100vh;
  background: #ffffff;
}

#hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 0 1 46%;
  min-width: 0;
  padding: 0 clamp(40px, 3vw, 64px) 0 clamp(40px, 5vw, 100px);
}

.hero-eyebrow {
  font-size: 14px; letter-spacing: 0.28em;
  color: #a68a6d; margin-bottom: 30px;
  font-weight: 600;
  text-transform: uppercase;
}

.hero-title {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(30px, 3.6vw, 60px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #4a453d;
}
.hero-title .accent {
  font-weight: 800;
  color: #2a2520;
}

.hero-divider {
  width: 40px; height: 1px;
  background: #a68a6d;
  opacity: 0.5;
  margin: clamp(20px, 3vh, 36px) 0;
}

.hero-sub {
  font-size: clamp(14px, 1.1vw, 19px);
  color: #6b6259;
  line-height: 1.85;
  max-width: clamp(320px, 28vw, 480px);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-cta { display: flex; gap: 16px; margin-top: clamp(28px, 4.5vh, 52px); align-items: center; }

.btn-primary-blue {
  background: #2a2520;
  color: #faf8f4;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  padding: 15px 30px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.btn-primary-blue:hover {
  background: #8a6a4a;
}

/* ── Hero visual: photo + scan-grid + metrics card ───── */
.hero-visual {
  position: relative;
  z-index: 2;
  flex: 0 1 58%;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  transform: translateX(clamp(-140px, -8vw, -60px));
}

.hero-photo-wrap {
  position: relative;
  display: block;
}

.hero-photo {
  position: relative;
  z-index: 1;
  height: clamp(480px, 70vh, 720px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

#scan-grid {
  position: absolute;
  z-index: 2;
  top: -45px;
  left: 70px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* connector lines: scan point → each box */
#scan-connectors {
  position: absolute;
  z-index: 3;
  top: -27px;
  left: 54px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#scan-connectors path {
  fill: none;
  stroke: #c9a876;
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}
#scan-connectors circle {
  fill: #c9a876;
  opacity: 0.85;
}

.hero-box-col {
  position: absolute;
  z-index: 3;
  right: -80px;
  bottom: clamp(-24px, -2vh, 0px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: clamp(220px, 16vw, 260px);
}

.hero-box {
  width: 100%;
  background: #fffdf9f2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 50px -20px #2a251f14;
  padding: 22px 24px;
}

.hero-box-skin { padding: 16px 16px 12px; }

.metrics-title {
  font-size: 11px;
  font-weight: 600;
  color: #a68a6d;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

/* ── Skin layer insight panel (표피/진피/피하층 depth scan) ── */
.skin-insight {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
}
.skin-insight svg {
  width: 100%;
  height: 100%;
  display: block;
}
.skin-insight .layer-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.skin-insight .layer-labels span {
  position: absolute;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.layer-label-epi  { top: 14px;  color: #8a6a4a; }
.layer-label-derm { top: 63px;  color: #9a5f52; }
.layer-label-sub  { top: 116px; color: #4d7a95; }

.probe-dot {
  animation: probePulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.probe-dot.d2 { animation-delay: .4s; }
.probe-dot.d3 { animation-delay: .8s; }
@keyframes probePulse {
  0%, 100% { opacity: .55; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.scan-sweep {
  animation: sweepMove 4s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes sweepMove {
  0%   { transform: translateY(-16px); opacity: 0; }
  8%   { opacity: .8; }
  92%  { opacity: .8; }
  100% { transform: translateY(160px); opacity: 0; }
}

.metric-row {
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.metric-row:last-child { margin-bottom: 0; }

.metric-label {
  font-size: 12px;
  color: #8a8078;
  font-weight: 500;
}
.metric-label.metric-alert { color: #c0392b; }

.metric-bar-track {
  height: 4px;
  background: #ede7de;
  border-radius: 3px;
  overflow: hidden;
}
.metric-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #c9a876, #8a6a4a);
  border-radius: 3px;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.metric-bar.metric-alert { background: linear-gradient(90deg, #d9705f, #c0392b); }

.metric-value {
  font-size: 13px;
  font-weight: 600;
  color: #2a2520;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.metric-value.metric-alert { color: #c0392b; }

.scroll-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0.4;
}
.scroll-hint span {
  font-size: 12px; letter-spacing: 0.15em;
  color: #17181c; text-transform: uppercase;
}
.scroll-arrow {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, #17181c, transparent);
  animation: scrollBounce 2.5s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%       { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* ── Text reveal animation ── */
.reveal-block {
  overflow: hidden;
}
.reveal-inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-block.revealed .reveal-inner {
  transform: translateY(0);
  opacity: 1;
}

.hero-divider {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-divider.revealed { transform: scaleX(1); }

.hero-eyebrow,
.hero-sub, .hero-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-eyebrow.revealed,
.hero-sub.revealed,
.hero-cta.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero: mobile responsive ── */
@media (max-width: 900px) {
  #hero {
    height: auto;
    min-height: 100vh;
    padding-top: clamp(120px, 18vh, 160px);
    padding-bottom: 48px;
  }
  #hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
  .hero-content {
    flex: none;
    width: 100%;
    padding: 0 24px;
    text-align: center;
  }
  .hero-divider { margin-left: auto; margin-right: auto; }
  .hero-sub { max-width: none; margin: 0 auto; }
  .hero-cta { justify-content: center; }

  .hero-visual {
    flex: none;
    width: 100%;
    transform: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
  }
  .hero-photo-wrap {
    width: 100%;
  }
  .hero-photo {
    height: auto;
    width: 100%;
  }
  .hero-box-col {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 360px;
    margin: 20px auto 0;
    gap: 8px;
  }
  #scan-connectors { display: none; }
}

@media (max-width: 480px) {
  .hero-content { padding: 0 16px; }
}


/* ══════════════════════════════════════════════════════════
   index.html — #partners
   ══════════════════════════════════════════════════════════ */

#partners {
  background: #ffffff;
  padding: clamp(40px, 6vh, 64px) 0;
}
#partners-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(40px, 12vw, 80px);
}
.partners-eyebrow {
  font-size: 12px; letter-spacing: 0.24em;
  color: #a68a6d; margin-bottom: 28px;
  font-weight: 600; text-transform: uppercase;
  text-align: center;
}
.partners-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 3%, black 97%, transparent 100%);
}
.partners-track {
  display: flex;
  width: max-content;
  animation: partnersScroll 32s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
.partners-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 clamp(24px, 3vw, 40px);
}
.partner-logo img {
  max-height: 26px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}
@media (max-width: 600px) {
  .partners-track-wrap { -webkit-mask-image: none; mask-image: none; }
  .partners-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .partners-set { width: 100%; flex-wrap: wrap; justify-content: center; }
  .partners-set[aria-hidden="true"] { display: none; }
  .partner-logo { height: 40px; padding: 0 16px; }
  .partner-logo img { max-height: 20px; max-width: 120px; }
}


/* ══════════════════════════════════════════════════════════
   index.html — #domains
   ══════════════════════════════════════════════════════════ */

#domains {
  background: white;
  padding: clamp(80px, 10vh, 130px) 0;
}
#domains-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(40px, 8vw, 140px);
}
.domains-eyebrow {
  font-size: 14px; letter-spacing: 0.28em;
  color: #a68a6d; margin-bottom: 20px;
  font-weight: 600; text-transform: uppercase;
  text-align: center;
}
.domains-heading {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 400;
  color: #4a453d;
  line-height: 1.3;
  margin-bottom: clamp(48px, 6vh, 72px);
  text-align: center;
}
.domains-heading b { font-weight: 800; color: #2a2520; }

.domains-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.domains-fade-in.revealed { opacity: 1; transform: translateY(0); }

.domains-wrap {
  display: flex;
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
}

.domains-tabs {
  flex: 0 0 clamp(240px, 22vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.domain-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: #fffdf9;
  cursor: pointer;
  text-align: left;
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  box-shadow: 0 1px 0 #2a251f0f, 0 12px 30px -22px #2a251f1f;
  opacity: 0.55;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.domain-tab:hover { background: #fffdf980; opacity: 0.8; }
.domain-tab.active {
  background: #fffdf9;
  opacity: 1;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
  border-color: #c9a876;
}
.domain-tab-icon {
  width: 120px; height: 92px;
  border-radius: 10px;
  background: #ede7db;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}
.domain-tab-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.domain-tab-name { display: block; font-size: 16px; font-weight: 700; color: #4a453d; }
.domain-tab.active .domain-tab-name { color: #2a2520; }
.domain-tab-sub { display: block; font-size: 12px; color: #6b6259; margin-top: 3px; }

.domain-panel {
  flex: 1;
  min-width: 0;
  background: #fffdf9;
  border-radius: 20px;
  box-shadow: 0 1px 0 #2a251f0f, 0 30px 60px -30px #2a251f1f;
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
.domain-panel-img {
  flex: 0 0 42%;
  min-width: 0;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
}
.domain-illust { width: 100%; height: 100%; display: block; }
.domain-panel-text { flex: 1; min-width: 0; }
.domain-panel-tag {
  font-size: 12px; font-weight: 700; color: #a68a6d;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px;
}
.domain-panel-title {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800; color: #2a2520;
  line-height: 1.4;
  margin-bottom: 16px;
}
.domain-panel-desc {
  font-size: 15px; color: #6b6259; line-height: 1.8;
  margin-bottom: 20px;
}
.domain-panel-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.domain-chip {
  font-size: 12px; padding: 6px 14px; border-radius: 20px;
  background: #ede7db; color: #4a453d; font-weight: 600;
}
.domain-panel-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: #8a6a4a;
  text-decoration: none;
}
.domain-panel-link:hover { color: #4a453d; }

@media (max-width: 900px) {
  .domains-wrap { flex-direction: column; }
  .domains-tabs { flex-direction: row; overflow-x: auto; gap: 8px; flex: none; }
  .domain-tab { flex-direction: column; text-align: center; gap: 8px; flex: 0 0 auto; min-width: 120px; }
  .domain-tab-sub { display: none; }
  .domain-panel { flex-direction: column; }
  .domain-panel-img { flex: none; width: 100%; }
}

@media (max-width: 640px) {
  #domains-inner { padding-left: 20px; padding-right: 20px; }
  .domains-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .domains-tabs::-webkit-scrollbar { display: none; }
  .domain-tab {
    flex: 0 0 auto;
    min-width: 88px;
    padding: 6px;
    scroll-snap-align: start;
  }
  .domain-tab-icon { width: 76px; height: 56px; }
  .domain-tab-name { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════
   about.html — #about-hero
   ══════════════════════════════════════════════════════════ */

#about-hero {
  padding: clamp(160px, 22vh, 240px) 0 clamp(80px, 10vh, 120px);
  background: #ffffff;
}
.about-hero-layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.about-hero-text { flex: 0 1 42%; min-width: 0; }
.about-hero-visual {
  flex: 0 1 56%;
  min-width: 0;
  transform: translateX(clamp(0px, 4vw, 40px));
}
.about-hero-domains-img {
  width: 100%;
  height: auto;
  display: block;
}
.about-hero-eyebrow {
  font-size: 14px; letter-spacing: 0.28em;
  color: #a68a6d;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.about-hero-title {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(32px, 3.9vw, 60px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #4a453d;
}
.about-hero-title b { font-weight: 800; color: #2a2520; }
.about-hero-sub {
  margin-top: 28px;
  font-size: clamp(14px, 1.1vw, 18px);
  color: #6b6259;
  line-height: 1.85;
  max-width: 640px;
}
@media (max-width: 900px) {
  .about-hero-layout { flex-direction: column-reverse; }
  .about-hero-text, .about-hero-visual { flex: none; width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   about.html — #vision
   ══════════════════════════════════════════════════════════ */

#vision {
  padding: clamp(140px, 16vh, 200px) 0;
  background: #ffffff;
}
.vision-head {
  text-align: center;
  margin-bottom: clamp(80px, 10vh, 120px);
}
.sie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 6vw, 100px);
}
.sie-card { text-align: center; }
.sie-letter {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(56px, 7vw, 88px);
  font-weight: 200;
  color: #d8c4a8;
  margin-bottom: 24px;
  line-height: 1;
}
.sie-word {
  font-size: 19px;
  font-weight: 700;
  color: #2a2520;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.sie-desc {
  font-size: 16px;
  color: #8a8078;
  line-height: 1.8;
  max-width: 260px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .sie-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 640px) {
  #vision { padding-top: 80px; }
}


/* ══════════════════════════════════════════════════════════
   about.html — #leadership
   ══════════════════════════════════════════════════════════ */

#leadership {
  padding: clamp(140px, 16vh, 200px) 0;
  background: #faf8f4;
  text-align: center;
}
.ceo-photo-sparse {
  width: 140px;
  height: 187px;
  object-fit: cover;
  border-radius: 12px;
  margin: 32px auto 40px;
  display: block;
}
.ceo-name-sparse {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  color: #2a2520;
  margin-bottom: 8px;
}
.ceo-name-sparse span {
  font-size: 16px;
  font-weight: 500;
  color: #a68a6d;
  margin-left: 10px;
  letter-spacing: 0.1em;
}
.ceo-bio-sparse {
  max-width: 680px;
  margin: 28px auto 0;
  font-size: 16px;
  color: #6b6259;
  line-height: 1.95;
}
.ceo-bio-sparse b {
  color: #2a2520;
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════
   about.html — #history
   ══════════════════════════════════════════════════════════ */

#history {
  padding: clamp(140px, 16vh, 200px) 0;
  background: #ffffff;
  text-align: center;
}
.history-head-sparse { margin-bottom: clamp(80px, 10vh, 110px); }
.history-sparse-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: left;
}
.history-sparse-item {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  align-items: baseline;
}
.history-sparse-date {
  flex: 0 0 110px;
  font-size: 16px;
  font-weight: 700;
  color: #a68a6d;
}
.history-sparse-body {
  font-size: 16px;
  color: #4a453d;
  line-height: 1.7;
}
.history-sparse-body b { font-weight: 800; color: #2a2520; }

@media (max-width: 640px) {
  .history-head-sparse { margin-bottom: 56px; }
  .history-sparse-list {
    gap: 0;
    padding-left: 20px;
    border-left: 1.5px solid #e8e0d6;
  }
  .history-sparse-item {
    position: relative;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 28px 20px;
  }
  .history-sparse-item::before {
    content: "";
    position: absolute;
    left: -25.5px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a68a6d;
  }
  .history-sparse-item:last-child { padding-bottom: 0; }
  .history-sparse-date {
    flex: none;
    font-size: 14px;
  }
  .history-sparse-body { font-size: 15px; }
}


/* ══════════════════════════════════════════════════════════
   footer (shared: partials/footer.js)
   ══════════════════════════════════════════════════════════ */

#footer {
  background: #fafaf9;
  border-top: 1px solid #00000010;
  padding: 64px 0 40px;
}
#footer-inner {
  max-width: 1860px;
  margin: 0 auto;
  padding: 0 clamp(80px, 12vw, 240px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer-logo-panel {
  display: inline-flex;
  align-items: center;
}
.footer-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-info-line {
  font-size: 14px;
  color: #4a4a4699;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.footer-info-line a {
  color: #4a4a4699;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-info-line a:hover {
  color: #2c2c2acc;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid #00000018;
}
.footer-copy {
  font-size: 13px;
  color: #4a4a4699;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  #footer-inner { padding: 0 24px; }
  .footer-info-line { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════
   domains-*.html — shared detail page sections
   ══════════════════════════════════════════════════════════ */

.domain-detail-hero {
  padding: clamp(160px, 22vh, 240px) 0 clamp(60px, 8vh, 100px);
  background: #ffffff;
}
.domain-detail-hero-layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.domain-detail-hero-text { flex: 0 1 46%; min-width: 0; }
.domain-detail-hero-visual { flex: 0 1 54%; min-width: 0; }
.domain-detail-hero-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 0 #2a251f0f, 0 30px 60px -30px #2a251f1f;
}
.domain-detail-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.domain-detail-hero-title {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #4a453d;
}
.domain-detail-hero-title b { font-weight: 800; color: #2a2520; }
.domain-detail-hero-lead {
  margin-top: 24px;
  font-size: clamp(14px, 1.1vw, 17px);
  color: #6b6259;
  line-height: 1.85;
  max-width: 560px;
}
.domain-detail-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 900px) {
  .domain-detail-hero-layout { flex-direction: column-reverse; }
  .domain-detail-hero-text, .domain-detail-hero-visual { flex: none; width: 100%; }
  .domain-tech-split { padding-top: 50px; }
}

.domain-tech-split {
  padding: clamp(100px, 13vh, 160px) 0;
}
.domain-tech-split-layout {
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
}
.domain-tech-split-text { flex: 0 1 42%; min-width: 0; }
.domain-tech-split-visual { flex: 0 1 58%; min-width: 0; }
.domain-tech-split-heading {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #4a453d;
  margin-top: 16px;
}
.domain-tech-split-heading b { font-weight: 800; color: #2a2520; }
.domain-tech-split-cta { display: flex; gap: 14px; margin-top: clamp(28px, 4vh, 40px); flex-wrap: wrap; }
.domain-tech-split-cta .btn-primary-blue { text-decoration: none; display: inline-block; }
.btn-outline-blue {
  background: transparent;
  color: #4a453d;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  padding: 14px 29px;
  border-radius: 2px;
  border: 1px solid #d8d2c6;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.25s, color 0.25s;
}
.btn-outline-blue:hover {
  border-color: #8a6a4a;
  color: #8a6a4a;
}
.domain-tech-split-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 #2a251f0f, 0 40px 70px -30px #2a251f26;
}
.domain-tech-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.domain-tech-split-img.skini-3d-wrap { position: relative; }
.domain-tech-split-img.skini-3d-wrap canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) {
  .domain-tech-split-layout { flex-direction: column; }
  .domain-tech-split-text, .domain-tech-split-visual { flex: none; width: 100%; }
}

.domain-detail-section { padding: clamp(60px, 8vh, 100px) 0; }
.biz-model-section { background: #faf7f2; padding: clamp(100px, 14vh, 160px) 0; }
.domain-detail-section-title { margin-bottom: 32px; }
.domain-detail-body {
  font-size: 15px;
  color: #6b6259;
  line-height: 1.9;
  max-width: 860px;
}
.domain-detail-body + .domain-detail-body { margin-top: 20px; }

/* ── B2B2C business model diagram (domains-beauty.html) ── */
.biz-flow-intro { max-width: 620px; }
.biz-flow-intro p {
  font-size: 15px; color: #6b6259; line-height: 1.8; margin-top: 16px;
}
.biz-flow-stats { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.biz-flow-stat { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #6b6259; }
.biz-flow-stat-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #ede7db; color: #8a6a4a;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.biz-flow-stat-icon svg { width: 20px; height: 20px; }
.biz-flow-stat b { display: block; font-size: 17px; font-weight: 800; color: #2a2520; }

.biz-flow-diagram {
  display: flex; align-items: center; gap: 0;
  max-width: 1200px; margin: 20px auto 0;
}
.biz-flow-card {
  flex: 0 1 320px; min-width: 0; align-self: stretch;
  background: #fffdf9; border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
}
.biz-flow-pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #8a6a4a; background: #ede7db; border-radius: 999px;
  padding: 5px 14px; margin-bottom: 16px;
}
.biz-flow-card h3 { font-size: 18px; font-weight: 800; color: #2a2520; margin-bottom: 20px; }
.biz-flow-row { display: flex; gap: 12px; align-items: flex-start; }
.biz-flow-row + .biz-flow-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid #2a251f14; }
.biz-flow-row-icon {
  width: 36px; height: 36px; flex: none; color: #b89b74;
  display: flex; align-items: center; justify-content: center;
}
.biz-flow-row-icon svg { width: 30px; height: 30px; }
.biz-flow-row-title { font-size: 14px; font-weight: 700; color: #2a2520; margin-bottom: 4px; }
.biz-flow-row-desc { font-size: 13px; color: #6b6259; line-height: 1.6; }

.biz-flow-connector {
  flex: 1 1 140px; min-width: 60px; max-width: 200px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; margin: 0 -40px; position: relative; z-index: 1;
}
.biz-flow-connector-line {
  position: relative; width: 100%;
  border-top: 2px dashed #d8cdb8;
}
.biz-flow-connector-line::before,
.biz-flow-connector-line::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; background: #d8cdb8; transform: translateY(-50%);
}
.biz-flow-connector-line::before { left: -3px; }
.biz-flow-connector-line::after { right: -3px; }

.biz-flow-visual {
  flex: 2 1 480px; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.biz-flow-visual-circle {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  width: 100%; max-width: 480px; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f6f2ea 0%, #f6f2ea 48%, #f6f2ea00 72%);
}
.biz-flow-visual-item { display: flex; flex-direction: column; align-items: center; }
.biz-flow-visual-label {
  font-size: 12px; font-weight: 600; color: #2a2520; text-align: center;
  white-space: normal; margin-bottom: 20px; max-width: 128px;
}
.biz-flow-plus { font-size: 22px; font-weight: 700; color: #a68a6d; flex: none; }
.biz-flow-device, .biz-flow-phone {
  display: flex; align-items: flex-end; justify-content: center;
  height: 180px;
}
.biz-flow-device img {
  width: 140px; height: auto; max-height: 180px; object-fit: contain;
}
.biz-flow-phone img {
  width: 165px; height: auto; max-height: 180px; object-fit: contain;
}

.biz-flow-footnote { font-size: 11px; color: #a68a6d; margin-top: 24px; }

@media (max-width: 900px) {
  .biz-flow-diagram { flex-direction: column; }
  .biz-flow-card { align-self: stretch; width: 100%; }
  .biz-flow-connector { flex: 1 1 100px; width: auto; min-width: 0; margin: 0; padding: 8px 0; }
  .biz-flow-connector-line { width: 2px; max-width: none; height: 100%; min-height: 12px; border-top: none; border-left: 2px dashed #d8cdb8; }
  .biz-flow-connector-line::before, .biz-flow-connector-line::after { left: 50%; top: auto; transform: translateX(-50%); }
  .biz-flow-connector-line::before { top: -3px; }
  .biz-flow-connector-line::after { bottom: -3px; }
  .biz-flow-visual { flex: 2 1 400px; flex-direction: row; width: 100%; padding: 0; }
  .biz-flow-visual-circle { padding: 0; }
}

@media (max-width: 480px) {
  .biz-flow-visual-circle {
    flex-direction: column;
    gap: 16px;
    max-width: 220px;
    aspect-ratio: auto;
    border-radius: 24px;
    padding: 0;
  }
  .biz-flow-device img { width: 100px; }
  .biz-flow-phone img { width: 118px; }
  .biz-flow-device, .biz-flow-phone { height: 130px; }
}

/* ── domains-bio.html — 바이오차 생산 병목 해결 (business model) ── */
.bottleneck-card {
  background: white; border-radius: 24px; padding: 40px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
}
.bottleneck-top { display: flex; gap: clamp(32px, 5vw, 64px); align-items: flex-start; }
.bottleneck-top-text { flex: 1 1 55%; min-width: 0; }
.bottleneck-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #ede7db; color: #8a6a4a;
  display: flex; align-items: center; justify-content: center;
}
.bottleneck-icon svg { width: 24px; height: 24px; }
.bottleneck-top-text .domain-detail-body { margin-top: 16px; }
.bottleneck-points { margin-top: 24px; }
.bottleneck-points .biz-flow-row-desc { max-width: 460px; }

.bottleneck-top-visual {
  flex: 1 1 40%; min-width: 0; align-self: stretch;
  border-radius: 18px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f6f2ea;
}
.bottleneck-top-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bottleneck-stats {
  display: flex;
  border-top: 1px solid #ece5d6;
  margin-top: 36px; padding-top: 28px;
}
.bottleneck-stat {
  flex: 1; padding: 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.bottleneck-stat + .bottleneck-stat { border-left: 1px solid #ece5d6; }
.bottleneck-stat:first-child { padding-left: 0; }
.bottleneck-stat-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #a68a6d; font-weight: 600;
}
.bottleneck-stat-label svg { width: 16px; height: 16px; flex: none; }
.bottleneck-stat-value { font-size: 20px; font-weight: 800; color: #2a2520; }

.bottleneck-bottom {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 24px;
}
.bottleneck-panel {
  background: white; border-radius: 20px; padding: 28px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
}
.bottleneck-panel-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.bottleneck-panel-icon {
  width: 32px; height: 32px; flex: none; color: #a68a6d;
  display: flex; align-items: center; justify-content: center;
}
.bottleneck-panel-icon svg { width: 22px; height: 22px; }
.bottleneck-panel-head h3 { font-size: 15px; font-weight: 700; color: #2a2520; }
.bottleneck-panel-head h3 span { font-size: 12px; font-weight: 500; color: #a68a6d; }
.bottleneck-panel-head p { font-size: 12.5px; color: #6b6259; margin-top: 4px; }
.bottleneck-panel-img img { width: 100%; height: auto; display: block; border-radius: 10px; }

@media (max-width: 900px) {
  .bottleneck-top { flex-direction: column; }
  .bottleneck-top-visual { width: 100%; }
  .bottleneck-stats { flex-direction: column; gap: 20px; }
  .bottleneck-stat { padding: 0; }
  .bottleneck-stat + .bottleneck-stat { border-left: none; }
  .bottleneck-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bottleneck-card { padding: 20px; }
}

/* ── domains-agriculture.html — 모듈형 선별 플랫폼 ── */
.sort-platform-layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.sort-platform-visual { flex: 0 1 50%; min-width: 0; }
.sort-platform-img {
  border-radius: 20px;
  overflow: hidden;
}
.sort-platform-img img { width: 100%; height: auto; display: block; }
.sort-platform-content { flex: 0 1 50%; min-width: 0; }

.sort-platform-subhead {
  font-size: 15px; font-weight: 700;
  color: #a68a6d;
  margin-top: 12px;
  margin-bottom: 16px;
}

.sort-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.sort-platform-feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: #2a2520;
  line-height: 1.35;
}
.sort-platform-feature-icon {
  flex: none;
  width: 22px; height: 22px;
  color: #a68a6d;
  display: flex; align-items: center; justify-content: center;
}
.sort-platform-feature-icon svg { width: 100%; height: 100%; }

@media (max-width: 900px) {
  .sort-platform-layout { flex-direction: column; }
  .sort-platform-visual, .sort-platform-content { flex: none; width: 100%; }
  .sort-platform-visual { margin-bottom: 48px; }
  .sort-platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sort-platform-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .sort-platform-feature { align-items: center; text-align: center; }
}

/* ── domains-agriculture.html — business model & customers ── */
.biz-model-layout { display: flex; flex-direction: column; }

.biz-model-heading { position: relative; display: inline-block; font-size: clamp(30px, 3.6vw, 52px); }
.biz-model-heading b { position: relative; }
.biz-model-heading b::after {
  content: ''; position: absolute; left: -2px; right: -6px; bottom: -6px;
  height: 10px; border-radius: 6px;
  background: #e8dcc4; z-index: -1;
}

.biz-model-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 20px minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 0;
}
.biz-model-intro { grid-column: 1; max-width: 460px; }
.biz-model-intro p {
  font-size: 16px; color: #6b6259; line-height: 2; margin-top: 20px;
}
.biz-model-col { min-width: 0; display: flex; flex-direction: column; }
.biz-model-col--customers { grid-column: 3; }
.biz-model-divider { grid-column: 4; align-self: stretch; width: 1px; border-left: 1px dashed #d8cdb8; }
.biz-model-col--revenue { grid-column: 5; }

.biz-model-col-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: #2a2520;
  margin-bottom: 20px;
}
.biz-model-col-head em { font-style: normal; font-weight: 600; color: #9a8f7f; margin-left: 2px; }
.biz-model-col-icon {
  width: 22px; height: 22px; flex: none;
  color: #6b6259;
  display: flex; align-items: center; justify-content: center;
}
.biz-model-col-icon svg { width: 20px; height: 20px; }

.biz-model-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: #fff;
  border: 1px solid #ece5d6; border-radius: 16px; padding: 22px;
}
.biz-model-card + .biz-model-card { margin-top: 14px; }
.biz-model-card--accent {
  border-color: #eadfc4;
}
.biz-model-card-icon {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: #fff; color: #a68a6d;
  border: 1px solid #eadfc4;
  display: flex; align-items: center; justify-content: center;
}
.biz-model-card-icon svg { width: 22px; height: 22px; }
.biz-model-card h4 { font-size: 18px; font-weight: 700; color: #2a2520; }
.biz-model-card h4 span { font-weight: 600; color: #9a8f7f; }
.biz-model-card-sub { font-size: 15px; color: #6b6259; font-weight: 600; margin-top: 4px; }
.biz-model-card p { font-size: 15px; color: #6b6259; margin-top: 8px; line-height: 1.5; }
.biz-model-card p.biz-model-card-sub { margin-top: 4px; }

.biz-model-plus {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 10px auto; flex: none;
  font-size: 15px; font-weight: 700; color: #fff;
  background: #6b6259; border-radius: 50%;
}

@media (max-width: 1080px) {
  .biz-model-grid { grid-template-columns: 1fr; }
  .biz-model-intro, .biz-model-col--customers, .biz-model-col--revenue { grid-column: 1; }
  .biz-model-divider { display: none; }
  .biz-model-col { margin-top: 32px; }
}

/* ── domains-agriculture.html — partner companies ── */
.partner-companies-head { text-align: center; }
.partner-companies-head .heading { font-size: clamp(22px, 2.4vw, 28px); }

.partner-companies-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.partner-company {
  background: #fff; border: 1px solid #ece5d6; border-radius: 18px;
  padding: 28px 18px; text-align: center;
}
.partner-company-logo {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto 16px;
}
.partner-company-logo svg { width: 48px; height: 48px; }
.partner-company-logo-wide {
  width: auto; height: 30px; max-width: 100%;
}
.partner-company-logo-wide img {
  height: 100%; max-width: 100%; width: auto; object-fit: contain;
}
.partner-company h5 { font-size: 14px; font-weight: 700; color: #2a2520; }
.partner-company-rule {
  width: 28px; height: 1px; margin: 14px auto; border: none;
  background: #e2d9c6;
}
.partner-company p { font-size: 13px; color: #6b6156; line-height: 1.5; }

@media (max-width: 1080px) {
  .partner-companies-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .partner-companies-grid { grid-template-columns: repeat(2, 1fr); }
}

.partner-companies-grid--pair {
  grid-template-columns: repeat(2, minmax(220px, 280px));
  justify-content: center;
}
@media (max-width: 640px) {
  .partner-companies-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 480px) {
  .partner-companies-grid--pair {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
}

.partner-companies-grid--single {
  grid-template-columns: minmax(220px, 280px);
  justify-content: center;
}
@media (max-width: 480px) {
  .partner-companies-grid--single {
    grid-template-columns: minmax(0, 280px);
  }
}

.domain-product-layout {
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.domain-product-text { flex: 0 1 56%; min-width: 0; }
.domain-product-visual { flex: 0 1 44%; min-width: 0; }
.domain-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 20px;
  overflow: hidden;
  background: none;
}
.domain-product-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.domain-product-lead {
  margin-top: 8px;
  font-size: 15px;
  color: #6b6259;
  line-height: 1.9;
  max-width: 560px;
}
@media (max-width: 900px) {
  .domain-product-layout { flex-direction: column-reverse; }
  .domain-product-text, .domain-product-visual { flex: none; width: 100%; }
}

.domain-product-section--dark { background: #faf8f4; }
.domain-product-section--dark .domain-product-img {
  background: none;
}

.domain-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.domain-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 20px;
}
.domain-feature-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #8a6a4a;
  margin-bottom: 14px;
}
.domain-feature-icon svg { width: 26px; height: 26px; }
.domain-feature-title { font-size: 15px; font-weight: 700; color: #2a2520; margin-bottom: 6px; }
.domain-feature-desc { font-size: 13px; color: #6b6259; line-height: 1.6; }
@media (max-width: 640px) {
  .domain-feature-grid { grid-template-columns: 1fr; }
}

.domain-feature-grid--tri { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .domain-feature-grid--tri { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .domain-feature-grid--tri { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .domain-feature-grid--tri .domain-feature-card { padding: 12px 6px; }
  .domain-feature-grid--tri .domain-feature-icon { width: 32px; height: 32px; margin-bottom: 8px; }
  .domain-feature-grid--tri .domain-feature-icon svg { width: 20px; height: 20px; }
  .domain-feature-grid--tri .domain-feature-title { font-size: 12px; }
}

.domain-tech-split-img--placeholder {
  background: #f4f1ea;
  border: 1px dashed #d8d2c6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #a89f8f;
  font-size: 13px;
  line-height: 1.6;
  padding: 24px;
}
.domain-tech-split-img--contain {
  background: #fff;
  padding: 20px;
}
.domain-tech-split-img--contain img { object-fit: contain; }
.domain-tech-split-footnote {
  margin-top: 14px;
  font-size: 14px;
  color: #8a8377;
  line-height: 1.6;
}

.domain-highlight-row {
  display: flex;
  margin-top: 80px;
}
.domain-highlight {
  flex: 1;
  padding: 0 28px;
}
.domain-highlight:first-child { padding-left: 0; }
.domain-highlight + .domain-highlight {
  border-left: 1px solid #e5ddd0;
}
.domain-highlight-value {
  font-size: 32px;
  font-weight: 800;
  color: #8a6a4a;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.domain-highlight-value span { font-size: 18px; font-weight: 700; margin-left: 2px; }
.domain-highlight-label { font-size: 13px; color: #6b6259; line-height: 1.6; }
@media (max-width: 900px) {
  .domain-highlight-row { flex-wrap: wrap; gap: 24px; }
  .domain-highlight { flex: 1 1 40%; padding: 0; }
  .domain-highlight + .domain-highlight { border-left: none; }
  .domain-highlight:nth-child(2) { border-left: 1px solid #e5ddd0; padding-left: 24px; }
}
@media (max-width: 640px) {
  .domain-highlight-row { flex-direction: column; flex-wrap: nowrap; gap: 24px; }
  .domain-highlight,
  .domain-highlight:nth-child(2) { flex: 1 1 auto; padding: 0; }
  .domain-highlight + .domain-highlight { border-left: none; padding-top: 24px; border-top: 1px solid #e5ddd0; }
}

.domain-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
  font-size: 14px;
}
.domain-compare-table th, .domain-compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #2a251f14;
  text-align: left;
  color: #6b6259;
}
.domain-compare-table th {
  color: #2a2520;
  font-weight: 700;
  background: #ede7db;
}
.domain-compare-table tr.highlight td { color: #2a2520; font-weight: 700; background: #fbf3e7; }

.domain-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.domain-stat-card {
  background: #fffdf9;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
}
.domain-stat-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a68a6d; margin-bottom: 10px;
}
.domain-stat-value { font-size: 20px; font-weight: 800; color: #2a2520; line-height: 1.5; }

.domain-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.domain-chart-card {
  background: #fffdf9;
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -24px #2a251f1f;
}
.domain-chart-card.span-full { grid-column: 1 / -1; }
.domain-chart-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #a68a6d; margin-bottom: 16px;
}

.trl-stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 4px 4px 0; }
.trl-stepper::before {
  content: ''; position: absolute; top: 15px; left: 40px; right: 40px; height: 2px;
  background: #2a251f14;
}
.trl-step { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.trl-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  background: #2a251f14; color: #a68a6d; z-index: 1;
  border: 2px solid #fffdf9;
}
.trl-step.done .trl-dot { background: #a68a6d; color: #fff; }
.trl-step.current .trl-dot { background: #2a2520; color: #fffdf9; box-shadow: 0 0 0 4px rgba(166,138,109,0.18); }
.trl-step-year { font-size: 11px; color: #a68a6d; font-weight: 700; margin-top: 10px; }
.trl-step-label { font-size: 12px; color: #6b6259; margin-top: 4px; text-align: center; line-height: 1.4; max-width: 100px; }
@media (max-width: 480px) {
  .trl-step-label { max-width: 76px; font-size: 11px; }
}

.revenue-bars { display: flex; align-items: flex-end; gap: 18px; height: 132px; margin-top: 4px; }
.revenue-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.revenue-bar-value { font-size: 13px; font-weight: 800; color: #2a2520; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.revenue-bar { width: 100%; max-width: 52px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #c9b08d, #a68a6d); }
.revenue-bar-year { font-size: 11px; color: #a68a6d; margin-top: 10px; font-weight: 600; }

.grant-bar-track { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.grant-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.grant-legend { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.grant-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b6259; }
.grant-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.compare-bar-track { display: flex; align-items: center; height: 14px; border-radius: 7px; background: #ede7db; overflow: hidden; margin-top: 8px; }
.compare-bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #c9b08d, #a68a6d); }
.compare-bar-row + .compare-bar-row { margin-top: 16px; }
.compare-bar-row-label { display: flex; justify-content: space-between; font-size: 12px; color: #6b6259; font-weight: 600; }
.compare-bar-row-label b { color: #2a2520; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Domain detail pages redesign (Option 3 — Minimal / Tech Product) ── */
.opt3-spec-list { border-top: 1px solid #eee; margin-top: 32px; }
.opt3-spec-row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #eee; gap: 24px; }
.opt3-spec-label { font-size: 13px; color: #999; }
.opt3-spec-val { font-size: 15px; font-weight: 500; color: #111; text-align: right; }
.opt3-spec-val b { font-weight: 600; color: #111; }

.opt3-icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #eee; margin: 48px 0; }
.opt3-icon-card { background: #fff; padding: 30px 20px; text-align: center; }
.opt3-icon-glyph { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #111; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #111; }
.opt3-icon-glyph.active { background: #111; color: #fff; }
.opt3-icon-label { font-size: 12.5px; color: #444; }
@media (max-width: 640px) {
  .opt3-icon-row { grid-template-columns: repeat(2, 1fr); }
}

.opt3-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #eee; margin: 32px 0; }
.opt3-card { background: #fff; padding: 40px 36px; }
.opt3-card-tag { font-size: 11px; letter-spacing: 0.08em; color: #999; margin-bottom: 14px; text-transform: uppercase; }
.opt3-card-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: #111; }
.opt3-card-desc { font-size: 13.5px; color: #777; line-height: 1.7; margin-bottom: 28px; }
.opt3-card-stat { font-size: 40px; font-weight: 300; letter-spacing: -0.02em; color: #111; }
.opt3-card-stat span { font-size: 12px; color: #999; display: block; font-weight: 400; margin-top: 4px; }
@media (max-width: 640px) {
  .opt3-2col { grid-template-columns: 1fr; }
}

.opt3-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 32px 0 20px; }
.opt3-table th { text-align: left; font-weight: 500; padding: 12px 10px; color: #999; font-size: 11.5px; border-bottom: 1px solid #111; }
.opt3-table td { padding: 12px 10px; border-bottom: 1px solid #eee; color: #444; }
.opt3-table tr.hi td { color: #111; font-weight: 600; }

.opt3-minimal-bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; margin: 32px 0; }
.opt3-mb-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.opt3-mb-val { font-size: 12px; margin-bottom: 6px; color: #444; font-variant-numeric: tabular-nums; }
.opt3-mb-bar { width: 100%; max-width: 56px; background: #eee; }
.opt3-mb-bar.hi { background: #111; }
.opt3-mb-yr { font-size: 10.5px; color: #999; margin-top: 6px; }

.opt3-donut-row { display: flex; align-items: center; gap: 40px; margin: 32px 0; flex-wrap: wrap; }
.opt3-donut { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.opt3-donut-hole { width: 66px; height: 66px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.opt3-donut-hole b { font-size: 18px; font-weight: 600; color: #111; }
.opt3-donut-hole span { font-size: 9px; color: #999; }
.opt3-legend-item { font-size: 12.5px; color: #555; margin-bottom: 6px; }
.opt3-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }

.opt3-pvs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin: 32px 0 44px; }
.opt3-pvs-col { border: 1px solid #eee; padding: 26px 24px; }
.opt3-pvs-tag { font-size: 11px; letter-spacing: 0.08em; color: #999; text-transform: uppercase; margin-bottom: 12px; }
.opt3-pvs-col.solution { border-color: #111; }
.opt3-pvs-col.solution .opt3-pvs-tag { color: #111; font-weight: 600; }
.opt3-pvs-list { font-size: 13.5px; color: #555; line-height: 1.9; }
.opt3-pvs-list li { margin-bottom: 4px; }
.opt3-pvs-arrow { display: flex; align-items: center; justify-content: center; font-size: 20px; color: #ccc; }
@media (max-width: 640px) {
  .opt3-pvs { grid-template-columns: 1fr; }
  .opt3-pvs-arrow { transform: rotate(90deg); padding: 4px 0; }
}

.opt3-milestones { display: flex; border-top: 1px solid #eee; margin: 32px 0 8px; flex-wrap: wrap; }
.opt3-milestone { flex: 1; min-width: 110px; padding: 20px 16px 0; border-right: 1px solid #eee; }
.opt3-milestone:last-child { border-right: none; }
.opt3-milestone-stage { font-size: 11px; color: #999; margin-bottom: 8px; }
.opt3-milestone-val { font-size: 20px; font-weight: 600; margin-bottom: 6px; color: #111; }
.opt3-milestone-desc { font-size: 12px; color: #777; line-height: 1.6; }

.domain-cta-strip {
  padding: clamp(50px, 7vh, 80px) 0;
  background: #ede7db;
}
.domain-cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.domain-cta-links a {
  padding: 12px 24px;
  border-radius: 24px;
  background: #fffdf9;
  color: #4a453d;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.domain-cta-links a:hover { background: #2a2520; color: #fffdf9; }


/* ══════════════════════════════════════════════════════════
   store.php / store_item.php — 웹스토어
   ══════════════════════════════════════════════════════════ */

#store-hero {
  padding: clamp(160px, 22vh, 240px) 0 clamp(32px, 5vh, 48px);
  background: #ffffff;
}
.store-hero-sub {
  margin-top: 24px;
  font-size: clamp(14px, 1.1vw, 17px);
  color: #6b6259;
  line-height: 1.85;
  max-width: 640px;
}
.store-hero-sub b { color: #2a2520; font-weight: 700; }

#store-list {
  padding: 0 0 clamp(100px, 14vh, 160px);
  background: #ffffff;
}

/* 카테고리 탭 */
.store-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #2a251f12;
}
.store-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #e2dacd;
  background: #fffdf9;
  color: #6b6259;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.store-tab span {
  font-size: 12px;
  font-weight: 600;
  color: #a39a8c;
  font-variant-numeric: tabular-nums;
}
.store-tab:hover { border-color: #c9a876; color: #4a453d; }
.store-tab.on {
  background: #2a2520;
  border-color: #2a2520;
  color: #faf8f4;
}
.store-tab.on span { color: #faf8f4a8; }

/* 카테고리 태그 (카드 / 상세) */
.store-cat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-decoration: none;
}
.store-cat-tag.cat-product { background: #ece4d6; color: #7a5c3a; }
.store-cat-tag.cat-resell  { background: #dfe7e4; color: #40624f; }

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}

.store-card {
  display: flex;
  flex-direction: column;
  background: #fffdf9;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 0 #2a251f0f, 0 20px 40px -26px #2a251f1f;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s;
}
.store-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 #2a251f0f, 0 30px 55px -28px #2a251f2e;
}
.store-card:hover .store-card-more { color: #8a6a4a; }

.store-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #f7f4ee;
  overflow: hidden;
  touch-action: pan-y;
}

/* 옆으로 밀리는 슬라이드 트랙 (목록/상세 공용) */
.store-track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  will-change: transform;
}
/* 세로/가로 어떤 비율의 사진이든 잘리지 않고 전체가 보이도록 contain 사용 */
.store-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.store-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #a39a8c;
}
.store-badge-soldout {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: #2a2520e6;
  color: #faf8f4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
}

/* 사진 넘기기 화살표 */
.store-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #fffdf9e6;
  box-shadow: 0 2px 8px -2px #2a251f40;
  color: #4a453d;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
}
.store-nav.prev { left: 10px; }
.store-nav.next { right: 10px; }
.store-nav:hover { background: #fff; }
.store-card:hover .store-nav { opacity: 1; }

/* 사진이 여러 장일 때: 하단 중앙 점 (클릭 가능) */
.store-img-dots {
  position: absolute;
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 6px;
}
.store-img-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a252033;
  display: block;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.store-img-dots i:hover { transform: scale(1.3); }
.store-img-dots i.on { background: #2a2520a8; }

.store-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 20px;
}
.store-card-name {
  font-size: 17px;
  font-weight: 800;
  color: #2a2520;
  line-height: 1.45;
  margin-bottom: 10px;
}
.store-card-desc {
  font-size: 14px;
  color: #6b6259;
  line-height: 1.75;
  margin-bottom: 20px;
}
.store-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #2a251f12;
}
.store-card-pricebox { min-width: 0; }
.store-card-price {
  font-size: 19px;
  font-weight: 800;
  color: #2a2520;
  font-variant-numeric: tabular-nums;
}
.store-card-price span {
  font-size: 14px;
  font-weight: 600;
  margin-left: 2px;
}
.store-card-price-ask {
  font-size: 15px;
  font-weight: 700;
  color: #a68a6d;
}

/* 재고 표시 */
.store-stock {
  font-size: 12.5px;
  font-weight: 600;
  color: #8a8078;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.store-stock.low { color: #a8641f; }
.store-stock.out { color: #b0553f; }

.store-card-more {
  font-size: 13px;
  font-weight: 600;
  color: #a39a8c;
  flex: none;
  transition: color 0.25s;
}

.store-empty {
  text-align: center;
  padding: 80px 20px;
  color: #a39a8c;
  font-size: 15px;
}

/* ── 상세 페이지 ── */
#store-detail {
  padding: clamp(150px, 20vh, 220px) 0 clamp(100px, 14vh, 160px);
  background: #ffffff;
}
.store-back {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #8a6a4a;
  text-decoration: none;
  margin-bottom: 32px;
}
.store-back:hover { color: #4a453d; }

.store-detail-layout {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}
.store-detail-gallery { flex: 0 1 52%; min-width: 0; }
.store-detail-info { flex: 1; min-width: 0; }

.store-detail-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 20px;
  overflow: hidden;
  background: #f7f4ee;
  box-shadow: 0 1px 0 #2a251f0f, 0 30px 60px -30px #2a251f26;
  touch-action: pan-y;
}
.store-detail-main .store-slide { padding: 24px; }

/* 상세 페이지 화살표는 조금 더 크게 */
.store-detail-main .store-nav {
  width: 42px;
  height: 42px;
  font-size: 25px;
}
.store-detail-main .store-nav.prev { left: 16px; }
.store-detail-main .store-nav.next { right: 16px; }
.store-detail-main:hover .store-nav { opacity: 1; }

/* 현재 사진 번호 표시 */
.store-counter {
  position: absolute;
  bottom: 16px; right: 16px;
  z-index: 4;
  background: #2a2520b8;
  color: #faf8f4;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.store-counter b { font-weight: 700; }

/* 상세 페이지 재고 줄 */
.store-detail-stock {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 24px;
  margin-top: -8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #2a251f14;
}
.store-detail-stock .label {
  font-size: 13px;
  font-weight: 600;
  color: #a39a8c;
}
.store-detail-stock .store-stock {
  margin-top: 0;
  font-size: 15px;
}

.store-detail-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.store-thumb {
  width: 76px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f4ee;
  cursor: pointer;
  transition: border-color 0.2s, opacity 0.2s;
  opacity: 0.65;
}
.store-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.store-thumb:hover { opacity: 1; }
.store-thumb.active { border-color: #a68a6d; opacity: 1; }

.store-detail-name {
  font-family: 'SUIT', 'Apple SD Gothic Neo', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  color: #2a2520;
  line-height: 1.35;
  margin-bottom: 18px;
}
.store-detail-price {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: #2a2520;
  font-variant-numeric: tabular-nums;
  padding-bottom: 24px;
  border-bottom: 1px solid #2a251f14;
  margin-bottom: 24px;
}
.store-detail-price span { font-size: 17px; font-weight: 600; margin-left: 2px; }
.store-detail-desc {
  font-size: 15px;
  color: #6b6259;
  line-height: 1.9;
  margin-bottom: 32px;
}
.store-detail-btn { width: 100%; }
.store-detail-note {
  margin-top: 14px;
  font-size: 13px;
  color: #b0553f;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .store-detail-layout { flex-direction: column; }
  .store-detail-gallery, .store-detail-info { flex: none; width: 100%; }
}
/* 터치 기기에서는 화살표를 항상 표시 */
@media (hover: none) {
  .store-nav { opacity: 1; }
}
@media (max-width: 480px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-card-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .store-tab { padding: 8px 14px; font-size: 13px; }
}