/* =============================================================================
   MedQraft × Q-Atelier — Dark Regulatory Luxury
   medqraft.co.kr 브랜드 아이덴티티 기반: 니어블랙 + 샴페인 골드 + Pretendard
   ========================================================================== */

:root {
  --bg:        #0a0a0a;
  --bg-raise:  #0e0d0c;
  --panel:     #121110;
  --panel-2:   #161410;
  --line:      #222220;
  --line-soft: #1a1918;
  --line-gold: rgba(201, 168, 120, 0.3);

  --ivory:     #f2ede2;
  --dim:       rgba(242, 237, 226, 0.64);
  --faint:     rgba(242, 237, 226, 0.4);
  --ghosttxt:  rgba(242, 237, 226, 0.05);

  --gold:      #c9a878;
  --gold-hi:   #e2c99b;
  --gold-deep: #a4855a;
  --gold-tint: rgba(201, 168, 120, 0.06);
  --gold-dim:  rgba(201, 168, 120, 0.55);

  --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --text-hero: clamp(2.5rem, 1.3rem + 4.6vw, 4.4rem);
  --text-h2:   clamp(1.8rem, 1.1rem + 2.6vw, 3rem);
  --text-h3:   clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  --text-lead: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  --text-base: 0.98rem;
  --text-sm:   0.86rem;
  --text-xs:   0.72rem;
  --text-tag:  0.6875rem; /* 11px */

  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 3rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --maxw: 1240px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ivory);
  /* 앰비언트 골드 글로우 — 상단 우측/하단 좌측에서 은은하게 */
  background:
    radial-gradient(52% 38% at 82% -6%, rgba(201, 168, 120, 0.065), transparent 62%),
    radial-gradient(40% 30% at -8% 108%, rgba(201, 168, 120, 0.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;          /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

/* 최상단 골드 헤어라인 */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110;
  background: linear-gradient(90deg, transparent 4%, var(--gold-deep) 30%, var(--gold-hi) 50%, var(--gold-deep) 70%, transparent 96%);
  opacity: 0.85; pointer-events: none;
}

/* 필름 그레인 — 다크 럭셔리 질감 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 109; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

section[id], footer[id] { scroll-margin-top: 88px; }

h1, h2, h3 { text-wrap: balance; }
/* 본문 고아줄(마지막 줄에 단어 하나) 방지 */
p { text-wrap: pretty; }
/* 데스크탑 전용 줄바꿈 — 모바일에선 자연 흐름 */
@media (max-width: 640px) { br.br-lg { display: none; } }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

::selection { background: var(--gold); color: #0a0a0a; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* =============================================================================
   Section tag  —  [ ┌ LABEL ┘ ]  gold bordered w/ corner brackets
   ========================================================================== */
.tag {
  position: relative;
  display: inline-block;
  font-size: var(--text-tag);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-tint);
  border: 0.8px solid var(--line-gold);
  padding: 0.45em 1em;
}
.tag::before, .tag::after {
  content: ""; position: absolute; width: 7px; height: 7px;
}
.tag::before { top: -1.5px; left: -1.5px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.tag::after { bottom: -1.5px; right: -1.5px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }

.microlabel {
  font-size: var(--text-tag);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
.microlabel .dot { color: var(--gold); }

/* =============================================================================
   Buttons — sharp corners
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.8em 1.6em;
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em;
  border: 0.8px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--gold {
  background: linear-gradient(180deg, #dcc192, var(--gold) 55%, #bd9a66);
  color: #0a0a0a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn--gold:hover { background: linear-gradient(180deg, #e8d0a4, var(--gold-hi) 60%, #c9a878); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 34px -14px rgba(201, 168, 120, 0.55); }
.btn--ivory { background: var(--ivory); color: #0a0a0a; }
.btn--ivory:hover { background: #fff; transform: translateY(-2px); }
.btn--ghost { border-color: #2c2a26; color: var(--ivory); background: rgba(242, 237, 226, 0.02); }
.btn--ghost:hover { border-color: var(--gold-dim); color: var(--gold-hi); }
.btn--line { border-color: var(--line-gold); color: var(--gold); background: var(--gold-tint); }
.btn--line:hover { background: rgba(201, 168, 120, 0.14); }

/* =============================================================================
   Nav
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 0.8px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}
.nav.is-stuck {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.95), rgba(12, 11, 10, 0.82));
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom-color: var(--line-soft);
}
/* 스크롤 시 하단 골드 헤어라인 */
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(201, 168, 120, 0.35) 50%, transparent 90%);
  opacity: 0; transition: opacity 0.4s;
}
.nav.is-stuck::after { opacity: 1; }
/* 3컬럼 그리드: 로고 | 링크(정중앙) | CTA */
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.nav__inner .brand { justify-self: start; }
.nav__inner .nav__links { justify-self: center; }
.nav__inner .nav__cta { justify-self: end; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 30px; height: auto; flex-shrink: 0; }
.brand__stack { line-height: 1.15; }
.brand__name { font-weight: 800; font-size: 1.12rem; letter-spacing: -0.01em; }
.brand__name .q { color: var(--gold); }
.brand__sub { font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a { font-size: var(--text-sm); color: var(--dim); position: relative; transition: color 0.2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--gold); transition: width 0.3s var(--ease); }
.nav__links a:hover { color: var(--ivory); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-active { color: var(--gold-hi); }
.nav__links a.is-active::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 0.6rem; }
.nav__cta .btn { padding: 0.6em 1.2em; }
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__inner .nav__cta { grid-column: 2; }
}
@media (max-width: 560px) {
  .nav__cta .btn--ghost { display: none; }
  .brand__sub { letter-spacing: 0.18em; }
}

/* =============================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 6vw, 11rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
  min-height: 92vh;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 70% at 75% 20%, rgba(201, 168, 120, 0.055), transparent 60%),
    radial-gradient(60% 50% at 15% 85%, rgba(201, 168, 120, 0.03), transparent 65%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(242, 237, 226, 0.028) 0.8px, transparent 0.8px),
    linear-gradient(90deg, rgba(242, 237, 226, 0.028) 0.8px, transparent 0.8px);
  background-size: 72px 72px;
  mask-image: radial-gradient(110% 85% at 70% 20%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(110% 85% at 70% 20%, #000, transparent 75%);
}
.hero__watermark {
  position: absolute; z-index: 0; top: 8%; right: -3%;
  font-size: clamp(7rem, 18vw, 17rem); font-weight: 800; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 237, 226, 0.032);
  user-select: none; pointer-events: none; white-space: nowrap;
}
/* viewfinder corner brackets */
.hero__corner { position: absolute; z-index: 1; width: 22px; height: 22px; opacity: 0.5; }
.hero__corner--tl { top: 92px; left: 18px; border-top: 1px solid var(--faint); border-left: 1px solid var(--faint); }
.hero__corner--tr { top: 92px; right: 18px; border-top: 1px solid var(--faint); border-right: 1px solid var(--faint); }
.hero__corner--bl { bottom: 18px; left: 18px; border-bottom: 1px solid var(--faint); border-left: 1px solid var(--faint); }
.hero__corner--br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--faint); border-right: 1px solid var(--faint); }

.hero__wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.8em;
  border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.02);
  padding: 0.5em 1em; margin: 1.2rem 0 1.8rem;
  font-size: var(--text-tag); letter-spacing: 0.16em; text-transform: uppercase;
}
.hero__badge .q { color: var(--gold); font-weight: 700; }
.hero__badge .sep { width: 1px; height: 12px; background: var(--line); }
.hero__badge .pw { color: var(--faint); }

/* logo lockup (mark + wordmark + tagline) */
.hero__lockup { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.7rem; }
.hero__lockup-mark { width: 58px; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 22px rgba(201, 168, 120, 0.18)); }
.hero__lockup-text { display: grid; gap: 0.15rem; }
.hero__lockup-name { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.hero__lockup-tag { font-size: var(--text-sm); color: var(--dim); letter-spacing: 0.01em; }

.hero__title { font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
.hero__title .gold { color: var(--gold); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero__title .gold {
    background: linear-gradient(104deg, #ead4a6 0%, var(--gold) 42%, #ab8757 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.hero__title .row { display: block; overflow: hidden; }
.hero__title .row > span { display: block; transform: translateY(108%); transition: transform 0.9s var(--ease); }
.hero.is-ready .hero__title .row > span { transform: none; }
.hero.is-ready .hero__title .row:nth-child(2) > span { transition-delay: 0.08s; }

.hero__lead { margin-top: 1.6rem; font-size: var(--text-lead); color: var(--dim); max-width: 44ch; }
.hero__lead b { color: var(--ivory); font-weight: 700; }

.hero__pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-top: 1.5rem; font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.hero__pipeline .stage { color: var(--dim); }
.hero__pipeline .chev { color: var(--gold-deep); }

.hero__engine { margin-top: 1.4rem; font-size: var(--text-sm); color: var(--dim); max-width: 52ch; }
.hero__engine .em { color: var(--gold); font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }

.hero__recruit {
  margin-top: 1.8rem; border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015);
  padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.hero__blocks { display: flex; gap: 3px; }
.hero__blocks span { width: 9px; height: 14px; background: var(--gold); opacity: 0.9; }
.hero__blocks span.open { background: transparent; border: 1px solid var(--gold); animation: slot-pulse 1.5s ease-in-out infinite; }
@keyframes slot-pulse { 50% { background: rgba(201, 168, 120, 0.55); box-shadow: 0 0 10px rgba(201, 168, 120, 0.5); } }
.hero__recruit p { font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--dim); }
.hero__recruit p b { color: var(--gold); }

.hero__feats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); padding-top: 1.6rem; border-top: 0.8px solid var(--line-soft); }
.hero__feat h3 { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; }
.hero__feat p { font-size: var(--text-xs); color: var(--dim); }

/* terminal mockup */
.term {
  position: relative;
  border: 0.8px solid var(--line);
  background: linear-gradient(160deg, #100f0e, #0b0b0a 70%);
  font-family: var(--mono); font-size: 0.76rem;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 90px -34px rgba(201, 168, 120, 0.3);
}
.term__corner { position: absolute; width: 14px; height: 14px; }
.term__corner--tl { top: -1px; left: -1px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.term__corner--tr { top: -1px; right: -1px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }
.term__corner--bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.term__corner--br { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }
.term__bar { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-bottom: 0.8px solid var(--line-soft); color: var(--faint); letter-spacing: 0.1em; }
.term__bar .name { color: var(--gold); }
.term__body { padding: 1.1rem 1rem 1.2rem; display: grid; gap: 0.72rem; }
.term__line { display: flex; align-items: center; gap: 0.7em; color: var(--dim); white-space: nowrap; }
.term__line .ph { color: var(--faint); width: 3.4em; flex-shrink: 0; }
.term__line .lbl { color: var(--ivory); width: 7.5em; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; }
.term__meter { flex: 1; height: 3px; background: rgba(242, 237, 226, 0.08); position: relative; overflow: hidden; min-width: 40px; }
.term__meter i { position: absolute; inset: 0; right: 100%; background: var(--gold); transition: right 1.1s var(--ease); }
.term__line .st { color: var(--gold); width: 4.5em; text-align: right; flex-shrink: 0; }
.term__note { margin-top: 0.4rem; padding-top: 0.8rem; border-top: 0.8px dashed var(--line-soft); color: var(--faint); display: flex; gap: 0.6em; }
.term__note + .term__note { margin-top: 0; padding-top: 0; border-top: none; }
.term__note .c { color: var(--gold); }
.term__caption { font-family: var(--mono); font-size: var(--text-tag); color: var(--faint); margin-top: 1rem; letter-spacing: 0.02em; }
.term__cursor { display: inline-block; width: 7px; height: 13px; background: var(--gold); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term__foot { display: flex; justify-content: space-between; padding: 0.6rem 1rem; border-top: 0.8px solid var(--line-soft); color: var(--faint); letter-spacing: 0.12em; }
.term__foot .beta { color: var(--gold); }

.hero__scroll { position: absolute; z-index: 2; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: var(--text-tag); letter-spacing: 0.3em; color: var(--faint); text-transform: uppercase; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 22px; background: linear-gradient(var(--gold), transparent); margin: 8px auto 0; animation: drip 2s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 1020px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__watermark { font-size: clamp(5rem, 22vw, 10rem); top: 4%; }
  .term { max-width: 560px; }
}
@media (max-width: 620px) {
  .hero__feats { grid-template-columns: 1fr; gap: 0.9rem; }
  .hero { min-height: 0; }
  .hero__scroll { display: none; }
}

/* =============================================================================
   Section scaffolding
   ========================================================================== */
.section { padding-block: var(--section-y); position: relative; }
.section--line { border-top: 0.8px solid var(--line-soft); }
.section--raise { background: var(--bg-raise); border-block: 0.8px solid var(--line-soft); }
.sec-head { margin-bottom: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
/* 섹션 진입 시 골드 헤어라인이 좌→우로 그어지는 리빌 */
.sec-head::before, .qa-head::before {
  content: ""; display: block; flex-basis: 100%; width: 100%; height: 1px;
  margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  background: linear-gradient(90deg, rgba(201, 168, 120, 0.5), rgba(201, 168, 120, 0.12) 45%, transparent 85%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) 0.25s;
}
.sec-head.is-in::before, .qa-head.is-in::before { transform: scaleX(1); }
/* 간격 시스템: 태그 → 제목/브랜드 = 1.4rem 단일 규칙 */
.tag + .sec-title, .tag + .qa-head__brand { margin-top: 1.4rem; }
.sec-head--center { text-align: center; }
.sec-head--center .sec-intro { margin-inline: auto; }
.sec-head--sub { margin-top: clamp(3.2rem, 2.5rem + 2.5vw, 4.5rem); margin-bottom: 1.6rem; }
.sec-title { font-size: var(--text-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.14; }
.sec-title .gold { color: var(--gold); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sec-title .gold {
    background: linear-gradient(104deg, #ead4a6 0%, var(--gold) 42%, #ab8757 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.sec-intro { margin-top: 1.1rem; color: var(--dim); font-size: var(--text-lead); max-width: 56ch; }
.sec-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.sec-head--split > .sec-intro { max-width: 40ch; text-align: right; margin-top: 0; }
@media (max-width: 760px) { .sec-head--split > .sec-intro { text-align: left; } }

/* =============================================================================
   About — text + company profile
   ========================================================================== */
.about { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.about__text p { color: var(--dim); margin-bottom: 1.1rem; max-width: 58ch; }
.about__text p b { color: var(--ivory); font-weight: 700; }
.about__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.8rem; }
.mini-card { border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015); padding: 1.15rem 1.2rem; transition: border-color 0.3s; }
.mini-card:hover { border-color: var(--line-gold); }
.mini-card h3 { display: flex; align-items: center; gap: 0.55em; font-size: 0.95rem; font-weight: 700; margin-bottom: 0.45rem; }
.mini-card h3 svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; }
.mini-card p { font-size: var(--text-xs); color: var(--dim); line-height: 1.6; }
@media (max-width: 520px) { .about__cards { grid-template-columns: 1fr; } }

.profile { border: 0.8px solid var(--line); background: var(--panel); padding: clamp(1.4rem, 1rem + 1.5vw, 2rem); position: relative; }
.profile::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.profile__label { font-size: var(--text-tag); letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-bottom: 1.3rem; }
.profile__row { display: grid; grid-template-columns: 6.5em 1fr; gap: 1rem; padding-block: 0.7rem; border-bottom: 0.8px solid var(--line-soft); font-size: var(--text-sm); }
.profile__row dt { color: var(--faint); font-size: var(--text-xs); letter-spacing: 0.06em; padding-top: 2px; }
.profile__row dd { color: var(--ivory); }
.profile__row dd .tm { color: var(--gold); }
.profile__why { margin-top: 1.3rem; border: 0.8px solid var(--line-soft); background: var(--gold-tint); padding: 1rem 1.1rem; }
.profile__why h4 { font-size: var(--text-tag); letter-spacing: 0.18em; color: var(--gold); text-transform: uppercase; margin-bottom: 0.5rem; }
.profile__why p { font-size: var(--text-xs); color: var(--dim); line-height: 1.7; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* =============================================================================
   Q-Atelier — 5 stage cards
   ========================================================================== */
.qa-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.qa-head__brand { display: flex; align-items: center; gap: 1.2rem; }
.q-logo { width: clamp(52px, 4vw + 36px, 78px); height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 30px rgba(201, 168, 120, 0.22)); }
#platform { overflow: hidden; }

/* ===== 룸 투어 장면 (건축 라인아트) ===== */
.section > .wrap, .hero__wrap { position: relative; z-index: 1; }
.scene { position: absolute; pointer-events: none; user-select: none; z-index: 0; height: auto; }
.scene--arch {
  left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: clamp(300px, 30vw, 470px); opacity: 0.06;
}
.scene--library {
  right: 2.5%; top: 50%; transform: translateY(-50%);
  width: clamp(250px, 25vw, 420px); opacity: 0.16;
  mask-image: linear-gradient(90deg, transparent, #000 22%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.scene--comms { left: 3%; bottom: 4%; width: clamp(230px, 23vw, 400px); opacity: 0.15; }
@media (max-width: 1100px) { .scene--library, .scene--comms { opacity: 0.07; } }

/* 룸 라벨 — 건물 안내판 (태그와 같은 행에 인라인) */
.room-label {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: var(--text-tag);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0.9rem 0 0; vertical-align: middle;
}
.room-label span {
  color: var(--gold); border: 0.8px solid var(--line-gold);
  padding: 0.32em 0.55em; margin-right: 0.6em; background: var(--gold-tint);
}
.room-label + .tag { vertical-align: middle; }

/* 층별 안내 — 미니멀 레일 (데스크탑 전용) */
.floors {
  position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
  z-index: 95; display: grid; gap: 14px; justify-items: end;
}
.floors a {
  position: relative; display: block;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(242, 237, 226, 0.3); line-height: 1;
  padding: 3px 0; transition: color 0.3s;
}
/* 방 이름: 번호 왼쪽에 절대배치 — 레이아웃 밀림 없음 */
.floors .nm {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--font); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--gold-hi); white-space: nowrap;
  opacity: 0; transition: opacity 0.3s, transform 0.35s var(--ease);
  pointer-events: none;
}
/* 활성 인디케이터: 번호 아래 골드 대시 */
.floors a::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 14px; height: 1px; background: var(--gold);
  transform: translateX(-50%) scaleX(0); transition: transform 0.35s var(--ease);
}
.floors a:hover { color: var(--ivory); }
.floors a:hover .nm, .floors a.is-active .nm { opacity: 1; transform: translateY(-50%); }
.floors a.is-active { color: var(--gold-hi); }
.floors a.is-active::after { transform: translateX(-50%) scaleX(1); }
@media (max-width: 1360px) { .floors { display: none; } }
.qa-head__title { font-size: clamp(2.4rem, 1.4rem + 4vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.qa-head__title .tm { font-size: 0.4em; vertical-align: super; color: var(--gold); font-weight: 600; }
.qa-head__desc { margin-top: 1rem; color: var(--dim); max-width: 60ch; }
.qa-head__desc b { color: var(--ivory); }

.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
.stage-card { border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015); padding: 1.4rem 1.2rem 1.5rem; position: relative; transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s; }
.stage-card:hover { border-color: var(--line-gold); transform: translateY(-4px); background: rgba(201, 168, 120, 0.03); }
.stage-card__no { position: absolute; top: 0.9rem; right: 1rem; font-size: var(--text-tag); letter-spacing: 0.1em; color: rgba(242, 237, 226, 0.22); }
.stage-card__icon { width: 30px; height: 30px; border: 0.8px solid var(--line-gold); display: grid; place-items: center; margin-bottom: 2rem; }
.stage-card__icon svg { width: 15px; height: 15px; color: var(--gold); }
.stage-card h3 { font-size: 1.05rem; font-weight: 800; }
.stage-card .sub { font-size: var(--text-tag); letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; display: block; margin: 0.3rem 0 0.8rem; }
.stage-card p { font-size: var(--text-xs); color: var(--dim); line-height: 1.65; margin-bottom: 1rem; }
.stage-card ul { list-style: none; display: grid; gap: 0.42rem; }
.stage-card li { display: flex; gap: 0.55em; font-size: var(--text-xs); color: var(--dim); align-items: baseline; }
.stage-card li::before { content: "◎"; color: var(--gold); font-size: 0.8em; }
@media (max-width: 1080px) { .stages { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stages { grid-template-columns: 1fr; } }

/* =============================================================================
   Infrastructure — two pillars
   ========================================================================== */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.pillar { position: relative; border: 0.8px solid var(--line); background: var(--panel); padding: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); display: flex; gap: 1.3rem; align-items: flex-start; transition: border-color 0.3s; }
.pillar:hover { border-color: var(--line-gold); }
.pillar__icon { width: 44px; height: 44px; flex-shrink: 0; border: 0.8px solid var(--line-gold); background: var(--gold-tint); display: grid; place-items: center; }
.pillar__icon svg { width: 20px; height: 20px; color: var(--gold); }
.pillar h3 { font-size: 1.12rem; font-weight: 800; }
.pillar h3 .tm { color: var(--gold); }
.pillar .role { font-size: var(--text-tag); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: block; margin: 0.3rem 0 0.8rem; }
.pillar p { font-size: var(--text-sm); color: var(--dim); line-height: 1.7; }
.ai-note { margin-top: 0.8rem; border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015); padding: 1.1rem 1.3rem; display: flex; gap: 0.9em; align-items: flex-start; }
.ai-note svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.ai-note p { font-size: var(--text-sm); color: var(--dim); }
.ai-note p b { color: var(--ivory); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* =============================================================================
   Phases — 5 node timeline
   ========================================================================== */
.phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.phases::before { content: ""; position: absolute; top: 46px; left: 8%; right: 8%; height: 0.8px; background: linear-gradient(90deg, transparent, var(--line-gold) 15%, var(--line-gold) 85%, transparent); }
.phase { text-align: center; position: relative; }
/* 복도의 다섯 개 아치문 */
.phase__node {
  width: 62px; height: 92px; margin-inline: auto;
  border: 0.8px solid var(--line); border-radius: 30px 30px 0 0;
  background: var(--bg); display: grid; place-items: center;
  position: relative; transition: border-color 0.3s, box-shadow 0.3s;
}
.phase__node::after { content: ""; position: absolute; right: 10px; top: 52%; width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--gold-deep); }
.phase:hover .phase__node { border-color: var(--gold); box-shadow: inset 0 -18px 26px -20px rgba(201, 168, 120, 0.5); }
.phase__node svg { width: 20px; height: 20px; color: var(--gold); margin-top: -12px; }
.phase__node .pno { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--faint); }
.phase__meta { margin-top: 1.4rem; font-size: var(--text-tag); letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.phase h3 { font-size: 1rem; font-weight: 800; margin: 0.5rem 0 0.6rem; }
.phase p { font-size: var(--text-xs); color: var(--dim); line-height: 1.65; max-width: 24ch; margin-inline: auto; }
@media (max-width: 860px) { .phases { grid-template-columns: 1fr 1fr; } .phases::before { display: none; } }
@media (max-width: 480px) { .phases { grid-template-columns: 1fr; } }

/* =============================================================================
   Services — 4 feature cards
   ========================================================================== */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.feat { border: 0.8px solid var(--line); background: var(--panel); padding: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease); }
.feat:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.feat__no { position: absolute; top: 1rem; right: 1.4rem; font-size: clamp(2.2rem, 2rem + 1vw, 3rem); font-weight: 800; color: var(--ghosttxt); line-height: 1; letter-spacing: -0.03em; }
.feat__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.feat__icon { width: 36px; height: 36px; border: 0.8px solid var(--line-gold); background: var(--gold-tint); display: grid; place-items: center; }
.feat__icon svg { width: 17px; height: 17px; color: var(--gold); }
.feat__chip { font-size: var(--text-tag); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border: 0.8px solid var(--line-gold); padding: 0.3em 0.7em; }
.feat__flow { flex-basis: 100%; font-size: var(--text-tag); letter-spacing: 0.1em; color: var(--faint); }
.feat h3 { font-size: var(--text-h3); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.7rem; }
.feat > p { font-size: var(--text-sm); color: var(--dim); line-height: 1.7; margin-bottom: 1.2rem; max-width: 54ch; }
.feat ul { list-style: none; display: grid; gap: 0.5rem; }
.feat li { display: flex; gap: 0.6em; font-size: var(--text-sm); color: var(--dim); align-items: baseline; }
.feat li::before { content: "◎"; color: var(--gold); font-size: 0.85em; }
@media (max-width: 820px) { .features { grid-template-columns: 1fr; } }

/* beta strip — 섹션의 단일 CTA */
.beta-strip { margin-top: 2rem; border: 0.8px solid var(--line); background: var(--gold-tint); padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1.3rem; flex-wrap: wrap; text-align: center; }
.beta-strip p { font-size: var(--text-sm); color: var(--dim); }
.beta-strip p b { color: var(--gold); }
.beta-strip .hero__blocks span { width: 7px; height: 11px; }
.beta-strip .btn { padding: 0.65em 1.4em; }

/* =============================================================================
   Expertise — problem cards
   ========================================================================== */
.problems { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.problem { position: relative; border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015); padding: 1.4rem 1.3rem; transition: border-color 0.3s; }
.problem:hover { border-color: var(--line-gold); }
.problem__icon { width: 32px; height: 32px; border: 0.8px solid var(--line); display: grid; place-items: center; margin-bottom: 1.6rem; }
.problem__icon svg { width: 15px; height: 15px; color: var(--gold); }
.problem h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.5rem; }
.problem p { font-size: var(--text-xs); color: var(--dim); line-height: 1.65; }
@media (max-width: 980px) { .problems { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .problems { grid-template-columns: 1fr; } }

/* =============================================================================
   Steps — 6 cards
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.step { border: 0.8px solid var(--line); background: var(--panel); padding: 1.5rem 1.4rem; position: relative; overflow: hidden; transition: border-color 0.3s; }
.step:hover { border-color: var(--line-gold); }
.step__no { position: absolute; top: 0.8rem; right: 1.1rem; font-size: 2.4rem; font-weight: 800; color: var(--ghosttxt); line-height: 1; }
.step__label { display: flex; align-items: center; gap: 0.7em; font-size: var(--text-tag); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.step__label svg { width: 15px; height: 15px; }
.step h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 0.5rem; }
.step p { font-size: var(--text-xs); color: var(--dim); line-height: 1.7; max-width: 40ch; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* customers */
.customers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 2.6rem; }
.customer { border: 0.8px solid var(--line); padding: 1.4rem 1.3rem; background: rgba(242, 237, 226, 0.015); transition: border-color 0.3s; }
.customer:hover { border-color: var(--line-gold); }
.customer::before { content: ""; display: block; width: 28px; height: 2px; background: var(--gold); margin-bottom: 1.2rem; }
.customer h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0.45rem; }
.customer p { font-size: var(--text-xs); color: var(--dim); line-height: 1.65; }
@media (max-width: 720px) { .customers { grid-template-columns: 1fr; } }

/* standards */
.standards { margin-top: 3rem; text-align: center; }
.standards .tag { margin-bottom: 1.6rem; }
.standards__cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; max-width: 880px; margin-inline: auto; }
.standards__cloud span { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--dim); border: 0.8px solid var(--line); padding: 0.5em 1em; background: rgba(242, 237, 226, 0.015); transition: border-color 0.3s, color 0.3s; }
.standards__cloud span:hover { border-color: var(--line-gold); color: var(--gold-hi); }

/* =============================================================================
   FAQ — 2 col accordion
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
.faq-col { display: grid; gap: 0.8rem; }
.faq-item { border: 0.8px solid var(--line); background: rgba(242, 237, 226, 0.015); transition: border-color 0.3s; }
.faq-item[aria-expanded="true"], .faq-item:hover { border-color: var(--line-gold); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 0.9em; padding: 1.1rem 1.2rem; text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--ivory); }
.faq-q .qno { font-size: var(--text-tag); letter-spacing: 0.1em; color: var(--gold-deep); flex-shrink: 0; }
.faq-q .chev { margin-left: auto; flex-shrink: 0; width: 16px; height: 16px; color: var(--gold); transition: transform 0.35s var(--ease); }
.faq-item[aria-expanded="true"] .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { padding: 0 1.2rem 1.2rem 3.1rem; font-size: var(--text-sm); color: var(--dim); line-height: 1.75; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.contact .microlabel { margin-top: 1rem; }
.contact__lead { color: var(--dim); font-size: var(--text-base); max-width: 46ch; margin-top: 1.2rem; }
.contact__list { margin-top: 2rem; display: grid; gap: 1.1rem; }
.contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact__item .ico { width: 36px; height: 36px; border: 0.8px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.contact__item .ico svg { width: 16px; height: 16px; color: var(--gold); }
.contact__item .k { font-size: var(--text-tag); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.contact__item .v { font-size: var(--text-sm); color: var(--ivory); margin-top: 2px; }
.contact__item a.v:hover { color: var(--gold-hi); }

.form { border: 0.8px solid var(--line); background: var(--panel); padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); position: relative; }
.form::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form__field { margin-bottom: 1rem; }
.form__field label { display: block; font-size: var(--text-tag); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.45rem; }
.form__field label .req { color: var(--gold); }
.form__field input, .form__field select, .form__field textarea {
  width: 100%; background: rgba(242, 237, 226, 0.03); border: 0.8px solid var(--line);
  padding: 0.75em 0.9em; font-size: var(--text-sm); color: var(--ivory);
  transition: border-color 0.25s; border-radius: 0; appearance: none;
}
.form__field textarea { min-height: 120px; resize: vertical; }
/* 네이티브 드롭다운 옵션 — OS 흰 배경 위 흰 글씨 방지 */
.form__field select { color-scheme: dark; }
.form__field select option { background: #14130f; color: var(--ivory); }
.form__field select option:checked { background: var(--gold-deep); color: #0a0a0a; }
.form__field input:focus, .form__field select:focus, .form__field textarea:focus { border-color: var(--gold-dim); }
.form__field input:focus-visible, .form__field select:focus-visible, .form__field textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.form__field ::placeholder { color: rgba(242, 237, 226, 0.28); }
/* privacy consent */
.consent { display: flex; gap: 0.8rem; align-items: flex-start; cursor: pointer; margin: 1.1rem 0 1.2rem; }
.consent__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.consent__box {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px;
  border: 0.8px solid var(--line-gold); background: rgba(242, 237, 226, 0.03);
  display: grid; place-items: center; transition: background 0.25s, border-color 0.25s;
}
.consent__box svg { width: 12px; height: 12px; color: #0a0a0a; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.25s var(--ease); }
.consent__input:checked + .consent__box { background: var(--gold); border-color: var(--gold); }
.consent__input:checked + .consent__box svg { opacity: 1; transform: scale(1); }
.consent__input:focus-visible + .consent__box { outline: 1px solid var(--gold); outline-offset: 2px; }
.consent__text { font-size: var(--text-sm); color: var(--dim); line-height: 1.55; }
.consent__text .req { color: var(--gold); font-weight: 600; }
.consent__text small { display: block; margin-top: 0.35rem; font-size: var(--text-tag); color: var(--faint); letter-spacing: 0.02em; }

.form .btn { width: 100%; margin-top: 0.4rem; }
.form .btn:disabled { opacity: 0.6; cursor: progress; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-top: 0.9rem; font-size: var(--text-sm); line-height: 1.6; padding: 0.75em 1em; border: 0.8px solid var(--line); }
.form__status--info { color: var(--dim); border-color: var(--line-soft); }
.form__status--ok { color: var(--gold-hi); border-color: var(--line-gold); background: var(--gold-tint); }
.form__status--err { color: #e6b0a0; border-color: rgba(200, 110, 90, 0.4); background: rgba(200, 110, 90, 0.07); }
.form__fine { text-align: center; font-size: var(--text-tag); letter-spacing: 0.14em; color: var(--faint); margin-top: 0.9rem; text-transform: uppercase; }
.form__fine b { color: var(--gold); }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; gap: 0; } }

/* =============================================================================
   Footer
   ========================================================================== */
.footer { border-top: 0.8px solid var(--line-soft); background: #080808; padding: clamp(2.8rem, 2rem + 3vw, 4.5rem) 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 2rem; }
.footer__brand p { font-size: var(--text-xs); color: var(--dim); max-width: 34ch; margin-top: 1rem; line-height: 1.7; }
.footer__h { font-size: var(--text-tag); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem; }
.footer__col a { display: block; font-size: var(--text-sm); color: var(--dim); padding-block: 0.32rem; transition: color 0.2s; }
.footer__col a:hover { color: var(--gold-hi); }
.footer__txt { font-size: var(--text-sm); color: var(--dim); padding-block: 0.32rem; }
.footer__col .em { color: var(--gold-deep); }
.footer__bar { margin-top: clamp(2.2rem, 2rem + 2vw, 3.5rem); padding-top: 1.4rem; border-top: 0.8px solid var(--line-soft); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer__bar p { font-size: var(--text-tag); letter-spacing: 0.1em; color: var(--faint); }
.footer__bar .tm { color: var(--gold-deep); }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }

/* floating beta button */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--panel); border: 0.8px solid var(--line-gold); color: var(--gold);
  padding: 0.7em 1.2em; font-size: var(--text-sm); font-weight: 700;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.85);
  transition: background 0.25s, transform 0.25s var(--ease);
}
.fab:hover { background: var(--gold); color: #0a0a0a; transform: translateY(-2px); }
.fab svg { width: 15px; height: 15px; }

/* =============================================================================
   Luxury details — hover corner brackets + focus ring
   ========================================================================== */
.feat::before, .stage-card::before, .pillar::before, .problem::before, .step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px;
  border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold);
  opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.feat::after, .stage-card::after, .pillar::after, .problem::after, .step::after {
  content: ""; position: absolute; bottom: 0; right: 0; width: 13px; height: 13px;
  border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold);
  opacity: 0; transition: opacity 0.35s; pointer-events: none;
}
.feat:hover::before, .feat:hover::after,
.stage-card:hover::before, .stage-card:hover::after,
.pillar:hover::before, .pillar:hover::after,
.problem:hover::before, .problem:hover::after,
.step:hover::before, .step:hover::after { opacity: 1; }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* 커서 글로우 — 포인터를 따라오는 골드 광원 (데스크탑 전용) */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 520px; height: 520px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(201, 168, 120, 0.09), rgba(201, 168, 120, 0.035) 42%, transparent 70%);
  will-change: transform;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* =============================================================================
   Reveal
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

.hero__badge, .hero__lockup, .hero__lead, .hero__pipeline, .hero__engine, .hero__actions, .hero__recruit, .hero__feats, .hero__side {
  opacity: 0; transform: translateY(16px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.hero.is-ready .hero__badge { transition-delay: 0.1s; }
.hero.is-ready .hero__lockup { transition-delay: 0.2s; }
.hero.is-ready .hero__lead { transition-delay: 0.62s; }
.hero.is-ready .hero__pipeline { transition-delay: 0.7s; }
.hero.is-ready .hero__engine { transition-delay: 0.78s; }
.hero.is-ready .hero__actions { transition-delay: 0.86s; }
.hero.is-ready .hero__recruit { transition-delay: 0.95s; }
.hero.is-ready .hero__feats { transition-delay: 1.05s; }
.hero.is-ready .hero__side { transition-delay: 0.55s; }
.hero.is-ready .hero__badge, .hero.is-ready .hero__lockup, .hero.is-ready .hero__lead, .hero.is-ready .hero__pipeline,
.hero.is-ready .hero__engine, .hero.is-ready .hero__actions, .hero.is-ready .hero__recruit,
.hero.is-ready .hero__feats, .hero.is-ready .hero__side { opacity: 1; transform: none; }

/* =============================================================================
   모바일 최적화 — 실기기 렌더링 안정성 + 가독성
   ========================================================================== */
@media (max-width: 700px) {
  /* iOS/안드로이드 고정배경 렌더 버그 방지 */
  body { background-attachment: scroll; }
  /* 그레인 오버레이 blend-mode가 일부 모바일에서 색을 틀어지게 함 → 비활성 */
  body::after { display: none; }

  /* 골드 그라디언트 글씨 → 단색(선명한 골드). 실기기 그라디언트 페인팅 실패 시
     글씨가 투명해지는 문제를 원천 차단 */
  .hero__title .gold, .sec-title .gold {
    background: none !important;
    -webkit-text-fill-color: var(--gold-hi) !important;
    color: var(--gold-hi) !important;
  }

  /* 본문 가독성: 살짝 키우고 자간·행간 여유 */
  :root { --text-base: 1rem; --text-sm: 0.9rem; }
  .hero__lead, .sec-intro, .about__text p, .pillar p, .feat > p { line-height: 1.72; }

  /* 아주 옅은 라벨/캡션은 모바일에서 대비 보강 */
  .room-label, .hero__pipeline, .microlabel { color: var(--dim); }
  .term__caption, .feat__flow, .stage-card .sub, .phase__meta { color: var(--muted); }

  /* 히어로 배지 줄바꿈 정돈 */
  .hero__badge { flex-wrap: wrap; gap: 0.5em 0.7em; line-height: 1.4; }
  .hero__badge .sep { display: none; }

  /* 플로팅 베타 버튼: 폼/카드 가림 최소화 */
  .fab { padding: 0.6em 1.05em; font-size: 0.8rem; right: 14px; bottom: 14px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  /* 커서 글로우는 터치기기에서 이미 비활성 — 확인용 no-op */
  .cursor-glow { display: none; }
}

/* =============================================================================
   고급화 — 촉감·질감 디테일
   ========================================================================== */
/* 스크롤 진행 골드 라인 (상단) */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 111; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi) 60%, #fff);
  box-shadow: 0 0 14px rgba(201, 168, 120, 0.55);
  will-change: transform; pointer-events: none;
}

/* 커스텀 스크롤바 */
html { scrollbar-width: thin; scrollbar-color: #6b5836 #0a0a0a; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-deep), #5f4e30); border: 3px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* 골드 버튼 — hover 셰퍼 스윕(빛 sweep) */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold > * { position: relative; z-index: 1; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.5) 50%, transparent 66%);
  transform: translateX(-130%); transition: transform 0.75s var(--ease);
}
.btn--gold:hover::after { transform: translateX(130%); }

/* 리빌 — blur-to-sharp(더 고급스러운 등장) */
[data-reveal] { filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
[data-reveal].is-in { filter: blur(0); }

/* 자석 버튼: JS가 transform 인라인 적용 — 부드러운 복귀 위해 트랜지션 유지 */
.btn--gold.is-magnetic { transition: transform 0.35s var(--ease), background 0.25s, box-shadow 0.25s; }
@media (pointer: coarse) { #scroll-progress { display: none; } }

/* =============================================================================
   Practice + Platform 다이프티크 — 사람(컨설팅) ↔ 플랫폼
   ========================================================================== */
.duo__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(0.9rem, 0.5rem + 1vw, 1.8rem); align-items: stretch; }
.duo__panel {
  position: relative; display: flex; flex-direction: column;
  border: 0.8px solid var(--line); background: var(--panel);
  padding: clamp(1.7rem, 1rem + 2.2vw, 2.8rem); overflow: hidden;
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.duo__panel:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.duo__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.duo__panel--practice::before { background: linear-gradient(90deg, var(--gold-deep), transparent 72%); }
.duo__panel--platform::before { background: linear-gradient(90deg, var(--gold-hi), transparent 72%); }
/* 플랫폼 패널: '시스템' 뉘앙스의 미세 그리드 */
.duo__panel--platform { background:
  linear-gradient(var(--line-soft) 0.8px, transparent 0.8px) 0 0 / 100% 30px,
  var(--panel); background-blend-mode: normal; }

.duo__badge { font-family: var(--mono); font-size: var(--text-tag); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); }
.duo__mark { width: 50px; height: auto; margin: 1.6rem 0 1.1rem; filter: drop-shadow(0 6px 20px rgba(201,168,120,0.18)); }
.duo__mark--q { width: 44px; }
.duo__name { font-weight: 800; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.02em; line-height: 1; }
.duo__name .q { color: var(--gold); }
.duo__name .tm { font-size: 0.4em; vertical-align: super; color: var(--gold); font-weight: 600; }
.duo__line { font-size: var(--text-h3); font-weight: 700; color: var(--ivory); margin: 0.7rem 0 1rem; letter-spacing: -0.01em; }
.duo__line em { font-style: normal; color: var(--gold-hi); }
.duo__desc { color: var(--dim); font-size: var(--text-sm); line-height: 1.75; flex: 1; }
.duo__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.5rem; }
.duo__tags li { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--dim); border: 0.8px solid var(--line); padding: 0.4em 0.75em; }

/* 지식이 흐르는 다리 */
.duo__bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; min-width: 92px; }
.duo__bridge-top, .duo__bridge-bot { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.duo__bridge-top { color: var(--gold); }
.duo__bridge-bot { color: var(--faint); }
.duo__arrow { width: 58px; height: auto; color: var(--gold); }
.duo__arrow path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.duo__grid.is-in .duo__arrow path { animation: duo-draw 1s var(--ease) 0.3s forwards; }
@keyframes duo-draw { to { stroke-dashoffset: 0; } }

.duo__note { text-align: center; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); font-size: var(--text-sm); color: var(--dim); max-width: 62ch; margin-inline: auto; line-height: 1.7; }
.duo__note .c { color: var(--gold); margin-right: 0.4em; }

@media (max-width: 820px) {
  .duo__grid { grid-template-columns: 1fr; }
  .duo__bridge { flex-direction: row; gap: 1rem; padding: 0.3rem 0; min-width: 0; }
  .duo__arrow { transform: rotate(90deg); width: 34px; }
  .duo__panel--platform { background: var(--panel); }
}

/* =============================================================================
   지식의 흐름 (닫힌 고리) — #flow
   ========================================================================== */
.loop { list-style: none; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; }
.loop__node {
  position: relative; text-align: center;
  border: 0.8px solid var(--line); background: var(--panel);
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.loop__node:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.loop__node::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); }
.loop__no { font-family: var(--mono); font-size: var(--text-tag); color: var(--faint); }
.loop__tag { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0.3rem 0 1rem; }
.loop__ico { width: 42px; height: 42px; margin: 0 auto 0.9rem; border: 0.8px solid var(--line-gold); border-radius: 50%; display: grid; place-items: center; background: var(--gold-tint); }
.loop__ico svg { width: 19px; height: 19px; color: var(--gold); }
.loop__node h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 0.5rem; }
.loop__node p { font-size: var(--text-xs); color: var(--dim); line-height: 1.6; }
.loop__link { align-self: center; display: grid; place-items: center; padding: 0 clamp(3px, 0.8vw, 12px); }
.loop__link::before { content: "→"; font-family: var(--mono); color: var(--gold-deep); font-size: 1.05rem; }
.loop__return { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin-top: 1.7rem; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--gold); }
.loop__return svg { width: 20px; height: 20px; color: var(--gold-deep); flex-shrink: 0; }
@media (max-width: 860px) {
  .loop { grid-template-columns: 1fr; }
  .loop__link { padding: 0.4rem 0; }
  .loop__link::before { content: "↓"; }
  .loop__node { text-align: left; display: grid; grid-template-columns: 42px 1fr; column-gap: 1rem; align-items: center; }
  .loop__ico { margin: 0; grid-row: span 3; }
  .loop__no, .loop__tag { text-align: left; margin: 0; }
  .loop__tag { margin-bottom: 0.2rem; }
  .loop__node h3 { margin: 0; }
  .loop__node p { grid-column: 2; }
}

/* =============================================================================
   MedQraft 컨설팅 카드 — #consulting
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 0.4rem + 0.9vw, 1.15rem); }
.svc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 0.8px solid var(--line); background: var(--panel);
  padding: clamp(1.4rem, 1rem + 1.3vw, 2rem);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.svc-card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.svc-card__no { position: absolute; top: 1.1rem; right: 1.3rem; font-family: var(--mono); font-size: var(--text-tag); color: var(--faint); }
.svc-card__icon { width: 40px; height: 40px; border: 0.8px solid var(--line-gold); background: var(--gold-tint); display: grid; place-items: center; margin-bottom: 1.1rem; }
.svc-card__icon svg { width: 19px; height: 19px; color: var(--gold); }
.svc-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.svc-card p { font-size: var(--text-sm); color: var(--dim); line-height: 1.65; flex: 1; }
.svc-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.svc-card__tags span { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.03em; color: var(--muted); border: 0.8px solid var(--line); padding: 0.32em 0.6em; }
.svc-card--cta { background: linear-gradient(160deg, rgba(201, 168, 120, 0.09), var(--panel) 60%); border-color: var(--line-gold); }
.svc-card--cta .svc-card__icon { background: var(--gold); border-color: var(--gold); }
.svc-card--cta .svc-card__icon svg { color: #0a0a0a; }
.svc-card__link { margin-top: 1.2rem; font-size: var(--text-sm); font-weight: 600; color: var(--gold-hi); display: inline-flex; gap: 0.5em; align-items: center; }
.svc-card__link .arrow { transition: transform 0.3s var(--ease); }
.svc-card__link:hover .arrow { transform: translateX(4px); }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   히어로 우측 — 규제 판단 결과 카드 (터미널 대체)
   ========================================================================== */
.assess {
  position: relative;
  border: 0.8px solid var(--line);
  background: linear-gradient(160deg, #100f0e, #0b0b0a 72%);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 90px -34px rgba(201, 168, 120, 0.3);
}
.assess__bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 1.15rem; border-bottom: 0.8px solid var(--line-soft);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
}
.assess__bar .name { color: var(--gold); }
.assess__badge { color: var(--faint); letter-spacing: 0.18em; }
.assess__input {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 1.05rem 1.15rem 0.95rem; border-bottom: 0.8px dashed var(--line-soft);
}
.assess__k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); flex-shrink: 0; }
.assess__device { font-size: 1.05rem; font-weight: 700; color: var(--ivory); letter-spacing: -0.01em; }
.assess__device em { font-style: normal; font-family: var(--mono); font-size: 0.66rem; color: var(--faint); margin-left: 0.5em; letter-spacing: 0.02em; }
.assess__body { padding: 0.5rem 1.15rem; }
.assess__row {
  display: grid; grid-template-columns: 5.4em 1fr; gap: 1rem;
  padding: 0.68rem 0; border-bottom: 0.8px solid var(--line-soft); align-items: baseline;
}
.assess__row:last-child { border-bottom: none; }
.assess__label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.assess__val { font-size: 0.84rem; color: var(--dim); line-height: 1.55; }
.assess__val b { color: var(--gold-hi); font-weight: 700; }
.assess__chip {
  display: inline-block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.05em;
  color: var(--gold); border: 0.8px solid var(--line-gold); background: var(--gold-tint);
  padding: 0.18em 0.5em; margin-left: 0.35em; white-space: nowrap; vertical-align: middle;
}
.assess__foot {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  padding: 0.95rem 1.15rem; border-top: 0.8px solid var(--line-soft);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em;
}
.assess__status--engine { color: var(--gold); }
.assess__status--expert {
  color: var(--gold-hi);
  animation: assess-verify 2.6s var(--ease) infinite;
}
@keyframes assess-verify { 0%, 70%, 100% { opacity: 1; } 82% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .assess__status--expert { animation: none; } }