/* ==========================================================================
   캡틴자동문 — 스틸 블루 + 로고 레드 (3안, 2026-08-10 확정)
   회색 매스는 로고 파랑 쪽으로 기울인 저채도 블루그레이, 강조색 한 자리는 로고 빨강.
   방패 마크(#D90A09 / #1413D5)는 이 팔레트와 무관하게 원래 색을 유지한다.
   단일 테마(브랜드 사이트)로 확정. 모든 색을 명시적으로 칠한다.
   ========================================================================== */

:root {
  --ink:        #0C1020;
  --steel-900:  #121829;
  --steel-800:  #1A2234;
  --steel-700:  #243047;
  --steel-600:  #3C4A66;
  --alu-050:    #F7F8FB;
  --alu-100:    #EEF0F5;
  --alu-200:    #DEE2EB;
  --alu-300:    #C3CAD8;
  --alu-500:    #8892A6;
  --paper:      #FFFFFF;
  /* 강조색 = 로고 빨강을 눈에 덜 피로하게 낮춘 톤 (2026-08-12).
     원래 #D90A09 는 채도가 92%라 넓게 깔면 색이 떨리고 오래 보기 힘들었다.
     채도를 63%까지 낮췄고, 그래도 흰 글자 대비는 5.25 → 5.44 로 오히려 나아졌다.
     방패 마크는 간판·견적서와 맞춰야 하므로 로고 빨강 #D90A09 를 그대로 쓴다(build.js 의 SHIELD).
     세 자리 모두 같은 계열이어야 한다. 채움 위 글자는 반드시 흰색. */
  --accent:      #C0392B;   /* 채움 — 버튼·CTA 밴드·배지 */
  --accent-hi:   #EE8074;   /* 어두운 배경 위의 붉은 글자 */
  --accent-deep: #8E2A20;   /* 밝은 배경 위의 붉은 글자 · 채움의 테두리 */
  --text:       #1A2130;
  --text-muted: #58627A;
  --text-invert:#EDEFF5;
  --text-invert-muted: #9BA5BC;

  --shell: 1120px;
  --rail: 3px;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.9vw, 4.1rem);

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* 상호 워드마크 전용 서체 — 간판의 두꺼운 고딕에 맞춘다.
   ⚠️ "캡틴자동문" 다섯 글자만 들어 있는 부분집합이다. 본문이나 다른 글자에 쓰면 안 나온다.
   바꾸려면 아래 src 파일명만 갈면 된다: blackhansans / dohyeon / jua
   (_font-compare.html 에서 셋을 나란히 볼 수 있다) */
@font-face {
  font-family: 'CaptainWordmark';
  src: url('fonts/jua.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  word-break: keep-all;   /* 한글 본문도 어절 단위로 끊는다 */
  overflow-wrap: anywhere; /* 다만 끊을 데가 없는 긴 문자열은 넘치지 않게 */
  background: var(--alu-100);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.22; text-wrap: balance; font-weight: 800; letter-spacing: -0.022em; word-break: keep-all; }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 22px; }

/* 라벨: 도면 주기(注記)처럼 모노스페이스 + 넓은 자간 */
.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- 헤더 --------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(238, 241, 243, 0.9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--alu-200);
}
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 13px; }
/* 방패 마크 — 간판·견적서에 쓰는 실제 로고. 페이지 팔레트와 무관하게 브랜드 색을 그대로 유지한다. */
.brand .mark { width: 48px; height: 48px; flex: none; display: block; }
.colophon .brand .mark { width: 44px; height: 44px; }
/* 두 줄(상호+영문)의 광학적 중심을 마크 중심에 맞춘다.
   글줄 상자는 위아래 여백이 같지 않아서, flex 중앙정렬만으로는 살짝 위로 뜬 것처럼 보인다.
   각 줄을 flex 항목으로 두고 line-height 를 실제 글자 높이에 가깝게 잡아 그 편차를 없앴다. */
.brand .name { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.brand .name b {
  font-family: 'CaptainWordmark', var(--font-sans);
  /* 이미 굵은 서체다. 여기에 굵기를 더 주면 브라우저가 억지로 늘려 뭉갠다. */
  font-size: 1.42rem; font-weight: 400; font-synthesis: none;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.05;
}
/* 실제 로고가 캡틴=빨강, 자동문=파랑 두 가지 색이다. 그대로 따라간다.
   여기 두 색은 로고 색이라 페이지 강조색(--accent)과 무관하게 유지한다. */
.brand .name b .w1 { color: #D90A09; }
.brand .name b .w2 { color: #1413D5; }
.brand .name small {
  /* 로고에 적힌 그대로 'Captain AutomaticDoor' — 대문자로 바꾸면 로고와 달라진다.
     길어서 자간을 좁혀야 상호 폭 안에 앉는다. */
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--alu-500); line-height: 1;
  white-space: nowrap;
}

.nav-main { display: flex; align-items: center; gap: 2px; }
.nav-main a {
  display: block; padding: 9px 13px; font-size: 0.94rem; font-weight: 600;
  color: var(--steel-700); border-radius: 3px;
  /* 자리가 모자라면 두 줄이 되는 건 괜찮지만 낱말 한가운데가 갈라지면 안 된다.
     body 의 overflow-wrap:anywhere 가 여기까지 내려와 "서비스"를 "서비/스"로 쪼갰다.
     띄어쓰기에서만 접히게 되돌린다 — 서비스는 한 줄, 증상별 안내는 3:2, 작업 방식은 2:2 로 앉는다. */
  word-break: keep-all; overflow-wrap: normal;
  text-align: center; line-height: 1.32;
}
.nav-main a:hover { color: var(--ink); background: var(--alu-200); }

/* 카톡과 전화 버튼은 높이가 같아야 한 벌로 보인다. stretch 로 큰 쪽에 맞춘다.
   전화번호는 어떤 폭에서도 절대 두 줄로 접히면 안 된다 — 번호가 끊기면 읽는 사람이 멈춘다. */
.masthead-cta { display: flex; align-items: stretch; gap: 10px; }
.masthead-cta .btn { white-space: nowrap; }
/* 이 사이트가 노리는 건 전화 한 통이다. 헤더 전화번호는 페이지에서 가장 눈에 띄어야 한다.
   - 번호 자체를 다른 글자보다 확실히 키운다(1.12 → 1.3rem)
   - 짙은 테두리로 윤곽을 세워 밝은 헤더 배경에서 버튼이 떠 보이게 한다
   - 아래로 옅은 그림자를 깔아 눌러야 할 것처럼 보이게 한다
   숫자를 더 키우려면 nav 가 좁아지므로 1000px 이하에서 한 단계 줄인다(아래 반응형). */
.masthead-cta .btn-accent {
  padding: 12px 22px;
  font-size: 0.98rem;
  border-width: 2px;
  border-color: var(--accent-deep);
  box-shadow: 0 3px 12px rgba(192, 57, 43, .28);
}
.masthead-cta .btn-accent:hover {
  border-color: var(--accent-deep);
  box-shadow: 0 5px 16px rgba(192, 57, 43, .36);
}
.masthead-cta .btn-accent .num {
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.01em;
}
/* 카톡은 전화 옆에 둔다. 전화가 주(主)이므로 카톡은 한 단계 작게 잡아 서열이 보이게 한다. */
.masthead-cta .btn-kakao { padding: 12px 16px; font-size: 0.94rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; font-weight: 700; font-size: 0.95rem; font-family: inherit;
  border: 1.5px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 눌리기 직전 살짝 밝아지는 정도. 더 밝히면 다시 눈이 아프다 (흰 글자 대비 5.48) */
.btn-accent:hover { background: #CB4335; border-color: #CB4335; transform: translateY(-1px); }
/* 카카오톡 — 노랑에 검은 글자가 카톡의 원래 모습이라 한눈에 알아본다 */
.btn-kakao { background: #FEE500; color: #191600; border-color: #E8D200; }
.btn-kakao:hover { background: #F7DE00; border-color: #D9C400; transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
.btn-ink:hover { background: var(--steel-700); border-color: var(--steel-700); }
.btn-wire { background: transparent; color: var(--ink); border-color: var(--steel-600); }
.btn-wire:hover { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }
.btn-wire-light { background: transparent; color: var(--text-invert); border-color: rgba(237,241,243,.42); }
.btn-wire-light:hover { background: var(--text-invert); color: var(--ink); border-color: var(--text-invert); }
.btn-lg { padding: 16px 26px; font-size: 1.03rem; }
.btn .num { font-family: var(--font-mono); letter-spacing: 0.01em; }

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--alu-300); background: var(--paper);
  cursor: pointer; border-radius: 2px;
}
.nav-toggle i { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px auto; transition: .2s; }
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- 히어로 -------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 420px at 78% -12%, rgba(192,57,43,.16), transparent 62%),
    linear-gradient(180deg, var(--steel-900) 0%, var(--ink) 100%);
  color: var(--text-invert);
  padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 108px);
}
/* 상단 레일 — 자동문 트랙 */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--rail);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, var(--steel-600) 34%, var(--steel-600) 100%);
}
.hero .shell {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 5vw, 60px); align-items: center;
}
.hero-copy { position: relative; padding-left: 26px; }
/* 문설주 */
.hero-copy::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(192,57,43,0) 82%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent-hi); margin-bottom: 20px;
}
.eyebrow .rule { width: 22px; height: 1px; background: var(--accent); flex: none; }

/* 미닫이문 개방 — 두 패널이 좌우로 갈라진다 */
.hero h1 {
  font-size: var(--step-4); font-weight: 800; letter-spacing: -0.04em;
  margin-bottom: 20px; color: #fff;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .panel { display: inline-block; will-change: transform, opacity; }
.hero h1 em { font-style: normal; color: var(--accent-hi); }

.hero .lead {
  font-size: var(--step-1); color: var(--text-invert-muted);
  max-width: 32em; margin-bottom: 12px; font-weight: 400;
}
.hero .areas-line {
  font-size: var(--step-0); color: var(--alu-300); margin-bottom: 30px;
}
.hero .areas-line b { color: #fff; font-weight: 700; }

.hero-actions { display: flex; gap: 11px; flex-wrap: wrap; }

/* 리뷰에서 고객이 직접 고른 항목 — 우리가 쓴 문구가 아니라는 게 핵심이라 수치를 앞세운다 */
.proof {
  margin-top: clamp(30px, 4.5vw, 50px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px;
}
.proof li { display: flex; flex-direction: column; gap: 1px; }
.proof b {
  font-family: var(--font-mono); font-size: 1.32rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.proof span { font-size: 0.87rem; color: var(--text-invert-muted); line-height: 1.45; }
.proof .cap {
  grid-column: 1 / -1; font-size: 0.78rem; color: var(--alu-500);
  border-top: 1px dashed rgba(255,255,255,.13); padding-top: 12px; margin-top: 2px;
}

/* 실적 패널 — 계기판처럼 */
.gauge {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.13);
  padding: 26px;
}
.gauge > .label { color: var(--accent-hi); display: block; margin-bottom: 4px; }
.gauge h3 { font-size: var(--step-1); color: #fff; margin-bottom: 18px; font-weight: 700; letter-spacing: -0.02em; }
.gauge dl {
  margin: 0; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
}
.gauge dl > div { background: var(--steel-900); padding: 16px 14px; }
.gauge dt {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .1em;
  color: var(--text-invert-muted); text-transform: uppercase; margin-bottom: 5px;
}
.gauge dd {
  margin: 0; font-size: 1.55rem; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.gauge dd small { font-size: 0.82rem; font-weight: 600; color: var(--alu-300); margin-left: 2px; letter-spacing: 0; }
.gauge .foot {
  font-size: 0.76rem; color: var(--text-invert-muted); margin-top: 12px; line-height: 1.55;
}

/* --- 섹션 공통 ----------------------------------------------------------- */
.band { padding-block: clamp(56px, 7.5vw, 96px); }
.band-paper { background: var(--paper); }
.band-alu { background: var(--alu-100); }
.band-ink { background: var(--ink); color: var(--text-invert); }

.band-head { max-width: 46rem; margin-bottom: clamp(30px, 4vw, 46px); }
.band-head .label { color: var(--accent-deep); display: block; margin-bottom: 12px; }
.band-ink .band-head .label { color: var(--accent-hi); }
.band-head h2 { font-size: var(--step-3); color: var(--ink); margin-bottom: 12px; }
.band-ink .band-head h2 { color: #fff; }
.band-head p { color: var(--text-muted); font-size: var(--step-1); }
.band-ink .band-head p { color: var(--text-invert-muted); }

/* --- 증상 빠른 진입 ------------------------------------------------------ */
.symptoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--alu-200); border: 1px solid var(--alu-200); }
.symptom {
  background: var(--paper); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 7px;
  transition: background .15s ease;
}
.symptom:hover { background: var(--alu-050); }
.symptom .q { font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.02em; display: flex; gap: 9px; align-items: baseline; }
.symptom .q::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--accent); transform: translateY(-1px); }
.symptom .a { color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; padding-left: 18px; }

.symptom-note {
  margin-top: 22px; padding: 16px 18px;
  border-left: var(--rail) solid var(--accent); background: var(--alu-050);
  font-size: 0.94rem; color: var(--steel-700);
}

/* --- 서비스 ------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.svc {
  background: var(--paper); border: 1px solid var(--alu-200);
  padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 10px;
  position: relative; transition: border-color .16s ease, transform .16s ease;
}
.svc::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: var(--rail);
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.svc:hover { border-color: var(--alu-300); transform: translateY(-3px); }
.svc:hover::before { transform: scaleX(1); background: var(--accent); }
.svc .icon { color: var(--ink); }
/* 카드가 눌린다는 걸 마우스를 올리기 전에 알려야 한다. 마우스가 없는 폰에서는 더 그렇다. */
.svc .go {
  margin-top: auto; padding-top: 12px;
  font-size: 0.86rem; font-weight: 700; color: var(--accent-deep);
}
.svc:hover .go { color: var(--accent); }
.svc h3 { font-size: 1.06rem; color: var(--ink); }
.svc p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.62; }
.svc ul { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 5px; }
.svc li {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .04em;
  color: var(--steel-600); background: var(--alu-100); padding: 3px 7px;
}

/* --- 작업 방식 (순서 있음 → 번호 사용이 타당) ---------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { padding: 26px 22px; border-left: 1px solid rgba(255,255,255,.14); }
.step:first-child { border-left: none; padding-left: 0; }
.step .n {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-hi);
  letter-spacing: .12em; margin-bottom: 12px; display: block;
}
.step h3 { font-size: 1.08rem; color: #fff; margin-bottom: 7px; }
.step p { font-size: 0.92rem; color: var(--text-invert-muted); line-height: 1.65; }

/* --- 현장 기록 ----------------------------------------------------------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case {
  background: var(--paper); border: 1px solid var(--alu-200);
  display: flex; flex-direction: column; transition: border-color .16s ease;
}
.case:hover { border-color: var(--steel-600); }
.case .frame {
  aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--steel-800), var(--ink));
  display: grid; place-items: center;
}
/* 유리문 하이라이트 느낌의 사선 */
.case .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.07) 46%, transparent 54%);
}
.case .frame .play {
  width: 46px; height: 46px; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 50%; display: grid; place-items: center; color: #fff;
  position: relative; z-index: 1; transition: background .18s ease, border-color .18s ease;
}
.case:hover .frame .play { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 실제 사진이 들어간 사례 카드 — 사진이 프레임을 채우고, 재생 아이콘 대신 사진 자체가 미리보기가 된다 */
.case .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case:hover .frame img { transform: scale(1.03); }
.case .frame img { transition: transform .35s ease; }
.case .frame .kind {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: .1em;
  font-weight: 700;
  color: #fff; background: var(--accent); padding: 3px 8px; text-transform: uppercase;
}
/* 분야 배지는 카드가 어느 플랫폼으로 나가는지도 같이 알린다 — 그 플랫폼의 브랜드 색을 그대로 쓴다.
   글자색은 각 배경에서 읽히는 쪽으로 고른다.
   유튜브 빨강 위 흰 글자 4.00 · 네이버 초록 위 먹 글자 8.39 (흰 글자였다면 2.25 로 안 읽힌다) */
.case-yt   .frame .kind { background: #FF0000; color: #fff; }
.case-blog .frame .kind { background: #03C75A; color: var(--ink); }
/* 출처 배지 — 이 칸이 사이트 안의 사례인지, 유튜브·블로그로 나가는지 누르기 전에 알린다.
   .kind(빨강 채움)와 구분되도록 테두리만 있는 형태로 둔다. */
.case .frame .src {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .06em;
  color: #fff; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.45);
  padding: 3px 7px; backdrop-filter: blur(2px);
}
.case .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.case h3 { font-size: 1rem; color: var(--ink); letter-spacing: -0.02em; }
.case p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.62; }
/* 카드 안 태그 — 블로그에 직접 다신 키워드를 그대로 보여준다 */
.case .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.case .tags span {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .02em;
  color: var(--steel-700); background: var(--alu-050);
  border: 1px solid var(--alu-200); padding: 3px 7px;
}
.case:hover .tags span { border-color: var(--alu-300); }

.case .meta {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--alu-300);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .06em;
  color: var(--alu-500); display: flex; justify-content: space-between; gap: 10px;
}

/* 현장 기록 아래 "더보기" — 유튜브 채널로 나간다(새 창) */
.cases-more {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px 20px;
}
.cases-more .btn svg { margin-left: 2px; }
.cases-more-note {
  flex: 1 1 22rem; font-size: 0.9rem; line-height: 1.65; color: var(--text-muted);
  border-left: var(--rail) solid var(--accent); padding-left: 12px;
}
.cases-more-note a { font-weight: 700; color: var(--steel-700); border-bottom: 1.5px solid var(--accent); }
@media (max-width: 720px) {
  .cases-more { flex-direction: column; align-items: stretch; }
  .cases-more .btn { justify-content: center; }
  /* 세로로 세우면 flex-basis 22rem 이 '너비'가 아니라 '높이'로 잡혀 큰 빈 칸이 생긴다.
     방향이 바뀌었으니 basis 도 풀어 준다. */
  .cases-more-note { flex: 0 0 auto; }
}

/* --- 들어올 때 뜨는 소개 영상 ---------------------------------------------- */
/* 영상 자체가 상호·전화번호를 품고 있으므로 위에 글자를 얹지 않는다. 얹으면 둘이 싸운다. */
.intro {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 20, 33, .95);
  display: grid; place-items: center; padding: 20px;
  /* 그래도 넘치면 잘라내지 말고 스크롤되게 둔다. safe 를 붙여야 위쪽이 안 잘린다 —
     가운데 정렬은 넘칠 때 위아래로 똑같이 밀어내서 위쪽 내용이 손댈 수 없게 사라진다. */
  overflow-y: auto;
  align-content: safe center;
}
.intro[hidden] { display: none; }
body.intro-open { overflow: hidden; }

.intro-box { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.intro-frame { position: relative; background: #000; border: 1px solid rgba(255,255,255,.16); }
.intro-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 세로 영상일 때. 폭까지 줄이지 않으면 화면 높이를 넘겨 전화 버튼이 밀려 내려간다. */
/* ⚠️ 여기서 정하는 건 **폭**이고, 영상 높이는 그 폭의 16/9 배가 된다.
   화면 높이의 60% 쯤에 앉히려면 폭을 34vh 로 잡아야 한다(34 × 16/9 ≈ 60).
   62vh 를 넣었더니 영상 높이가 110vh 가 되어 소리 버튼과 전화·건너뛰기 버튼이
   화면 밖으로 밀려 아예 안 보였다(2026-08-12에 겪음). 남는 40% 는 버튼 몫이다. */
.intro-box.is-tall { max-width: min(420px, 34vh); }
.intro-box.is-tall .intro-video { aspect-ratio: 9 / 16; }

.intro-sound {
  position: absolute; right: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .04em;
  color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.45);
  padding: 7px 11px; cursor: pointer; backdrop-filter: blur(2px);
}
.intro-sound:hover { background: var(--accent); border-color: var(--accent); }
/* 무음일 땐 ✕ 표시, 소리를 켜면 음파 표시로 바꾼다 */
.intro-sound .wave { display: none; }
.intro-sound[aria-pressed="true"] .wave { display: inline; }
.intro-sound[aria-pressed="true"] .mute { display: none; }

.intro-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
/* 전화번호가 두 줄로 접히면 안 된다. 번호가 끊기면 읽는 사람이 멈춘다. */
.intro-acts .btn { white-space: nowrap; }
.intro-skip {
  background: none; border: 1px solid rgba(255,255,255,.34); cursor: pointer;
  color: rgba(255,255,255,.78); font-size: 0.92rem; font-weight: 600;
  padding: 13px 20px; font-family: inherit;
}
.intro-skip:hover { color: #fff; border-color: rgba(255,255,255,.7); }

@media (max-width: 720px) {
  .intro { padding: 14px; }
  .intro-acts { flex-direction: column; align-items: stretch; }
  .intro-acts .btn { justify-content: center; }
  /* 손가락으로 누르는 버튼이라 데스크톱보다 키운다 */
  .intro-sound { right: 10px; top: 10px; padding: 9px 13px; font-size: 0.78rem; }
  .intro-skip { padding: 15px 20px; font-size: 1rem; }
}

/* 폰을 세워 들었을 때는 세로 영상을 화면에 꽉 채운다. 쇼츠·릴스와 같은 모양이라 익숙하다.
   영상이 화면을 다 쓰고, 버튼은 그 위에 얹는다. 아래쪽은 어둡게 깔아 흰 글자가 읽히게 한다. */
@media (max-width: 720px) and (orientation: portrait) {
  .intro { padding: 0; }
  .intro-box.is-tall {
    max-width: none; width: 100%; gap: 0; position: relative;
    height: 100vh;
    height: 100dvh;   /* 주소창이 접혔다 펴져도 실제 보이는 높이에 맞춘다 */
  }
  .intro-box.is-tall .intro-frame { flex: 1; border: none; min-height: 0; }
  .intro-box.is-tall .intro-video {
    /* 비율을 풀고 화면을 채운다. 9:16 영상이라 양옆이 조금 잘리는 정도로 끝난다. */
    aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover;
  }
  .intro-box.is-tall .intro-acts {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 60px 16px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, rgba(13, 20, 33, .88) 42%);
  }
  /* 주소창에 가리지 않도록 조금 내려 잡는다 */
  .intro-box.is-tall .intro-sound { top: calc(12px + env(safe-area-inset-top)); }
}

/* --- 서비스 지역 ---------------------------------------------------------- */
.area-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(26px, 4vw, 52px); align-items: start; }
.area-list { display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li {
  border: 1px solid var(--alu-300); background: var(--paper);
  padding: 8px 14px; font-size: 0.93rem; font-weight: 600; color: var(--steel-700);
}
.area-list li.primary { background: var(--ink); border-color: var(--ink); color: var(--text-invert); }
.area-note { margin-top: 18px; font-size: 0.92rem; color: var(--text-muted); }

/* --- 마무리 CTA ---------------------------------------------------------- */
.closer {
  background: var(--accent); color: #fff;
  padding: clamp(34px, 4.5vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.closer h2 { font-size: var(--step-2); margin-bottom: 8px; }
.closer p { font-size: 1rem; color: rgba(255,255,255,.86); }
.closer .acts { display: flex; gap: 11px; flex-wrap: wrap; }
.closer-say { flex: 1 1 26rem; }

/* 사진 찍는 법 — 안 알려주면 대부분 너무 가까이 찍어 보내신다 */
.shotguide { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.shotguide li {
  position: relative; padding-left: 20px;
  font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,.9);
}
.shotguide li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; background: #fff;
}
.shotguide b { font-weight: 700; color: #fff; }
.closer .btn-ink:hover { background: #000; border-color: #000; }
/* 빨강 배경 위의 선버튼은 밝은 쪽으로 뒤집는다 */
.closer .btn-wire { color: #fff; border-color: rgba(255,255,255,.62); }
.closer .btn-wire:hover { background: #fff; color: var(--accent); border-color: #fff; }

/* --- 푸터 ---------------------------------------------------------------- */
.colophon { background: var(--ink); color: var(--text-invert-muted); padding-block: 52px 24px; }
.colophon-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 30px; margin-bottom: 36px; }
.colophon h4 { color: #fff; font-size: 0.92rem; margin-bottom: 13px; font-weight: 700; }
.colophon li { margin-bottom: 7px; font-size: 0.9rem; }
.colophon a:hover { color: var(--accent-hi); }
/* 푸터는 어두운 바탕이다. 로고 파랑(#1413D5)은 여기서 거의 안 보이므로 흰색으로 뒤집는다.
   간판도 어두운 바탕에는 흰색 판을 쓴다. */
.colophon .brand .name b,
.colophon .brand .name b .w1,
.colophon .brand .name b .w2 { color: #fff; }
.colophon .brand .name small { color: var(--text-invert-muted); }
.colophon .brand { margin-bottom: 14px; }
.colophon .about { font-size: 0.9rem; max-width: 30ch; line-height: 1.7; }
.colophon .tel-big {
  font-family: var(--font-mono); font-size: 1.22rem; color: var(--accent-hi);
  font-weight: 700; letter-spacing: 0.01em; display: inline-block; margin-bottom: 4px;
}
.colophon-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 0.78rem; color: #6E828E;
}

/* --- 모바일 고정 통화 바 -------------------------------------------------- */
.callbar { display: none; }

/* --- 반응형 -------------------------------------------------------------- */
/* 메뉴 여섯 개 + 카톡 + 전화번호가 한 줄에 들어가는 마지막 구간.
   여기서부터 메뉴를 조여 전화번호에 자리를 내준다. */
@media (max-width: 1180px) {
  .nav-main a { padding: 9px 9px; font-size: 0.9rem; }
  .masthead-cta .btn-accent { padding: 11px 17px; }
  .masthead-cta .btn-accent .num { font-size: 1.18rem; }
  .masthead-cta .btn-kakao { padding: 11px 13px; }
  .masthead-cta .btn-kakao .lbl { display: none; }
}

@media (max-width: 1000px) {
  .hero .shell { grid-template-columns: 1fr; }
  .services { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: none; padding-left: 0; }
  .step:nth-child(-n+2) { padding-top: 0; }
  .step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .symptoms { grid-template-columns: repeat(2, 1fr); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .area-wrap { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  /* 메뉴가 여섯 개라 이 폭부터는 전화번호를 한 단계 줄여야 줄이 안 밀린다 */
  .masthead-cta .btn-accent { padding: 11px 16px; }
  .masthead-cta .btn-accent .num { font-size: 1.14rem; }
  /* 카톡은 글자를 접고 말풍선만 남긴다. 자리를 전화번호에 내준다. */
  .masthead-cta .btn-kakao { padding: 11px 13px; }
  .masthead-cta .btn-kakao .lbl { display: none; }
}

@media (max-width: 720px) {
  .nav-main {
    position: fixed; inset: 68px 0 auto 0; z-index: 55;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--alu-200);
    padding: 10px 14px 18px; display: none;
    box-shadow: 0 18px 40px rgba(12,16,32,.14);
  }
  .nav-main.open { display: flex; }
  .nav-main a { padding: 13px 10px; border-bottom: 1px solid var(--alu-100); font-size: 1rem; }
  .nav-toggle { display: block; }
  /* 폰에서는 헤더 대신 하단 고정 바가 연락 수단을 전부 맡는다 */
  .masthead-cta .btn-accent, .masthead-cta .btn-kakao { display: none; }
  .services, .symptoms, .cases, .steps { grid-template-columns: 1fr; }
  .step { border-left: none; padding-left: 0; }
  .step:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.14); }
  .step:first-child { padding-top: 0; }
  .colophon-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-left: 18px; }
  .gauge dl { grid-template-columns: repeat(2, 1fr); }
  body { padding-bottom: 66px; }
  .callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--ink); border-top: var(--rail) solid var(--accent);
  }
  .callbar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; font-weight: 700; font-size: 0.98rem; color: var(--text-invert);
  }
  .callbar a + a { border-left: 1px solid rgba(255,255,255,.16); }
  /* 폰에서는 헤더 연락 버튼이 숨고 이 바가 그 자리를 대신한다. 전화 쪽을 더 넓고 크게 준다.
     가운데 카톡은 전화가 부담스러운 분과 사진을 먼저 보내고 싶은 분이 쓰신다. */
  .callbar a.primary { background: var(--accent); color: #fff; flex: 1.5; font-size: 1.08rem; }
  .callbar a.kakao { background: #FEE500; color: #191600; }
  .callbar a.kakao + a { border-left-color: rgba(255,255,255,.16); }
  .callbar a { gap: 6px; padding: 15px 6px; font-size: 0.94rem; }
}

/* --- 모션 --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .panel { animation: doorOpen .85s cubic-bezier(.16,.84,.34,1) both; }
  .hero h1 .line:nth-child(1) .panel { animation-delay: .06s; }
  .hero h1 .line:nth-child(2) .panel { animation-delay: .16s; }
  .hero .lead      { animation: rise .7s ease both .34s; }
  .hero .areas-line{ animation: rise .7s ease both .42s; }
  .hero-actions    { animation: rise .7s ease both .5s; }
  .gauge           { animation: rise .8s ease both .3s; }
  .eyebrow         { animation: rise .6s ease both; }
}
@keyframes doorOpen {
  from { transform: translateX(-102%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   서비스 상세 페이지
   ========================================================================== */

.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 380px at 82% -20%, rgba(192,57,43,.14), transparent 62%),
    linear-gradient(180deg, var(--steel-900) 0%, var(--ink) 100%);
  color: var(--text-invert);
  padding-block: clamp(38px, 5vw, 62px) clamp(44px, 6vw, 72px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--rail);
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, var(--steel-600) 34%, var(--steel-600) 100%);
}
.page-hero .shell { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(26px, 4vw, 52px); align-items: end; }
.page-hero h1 { font-size: var(--step-3); color: #fff; margin-bottom: 14px; }
.page-hero .lead { font-size: var(--step-1); color: var(--text-invert-muted); max-width: 34em; }

.crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .06em;
  color: var(--alu-500); margin-bottom: 16px;
}
.crumb a:hover { color: var(--accent-hi); }
.crumb .sep { color: var(--steel-600); }
.crumb b { color: var(--text-invert); font-weight: 600; }

.hero-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero-side .note { font-size: 0.85rem; color: var(--text-invert-muted); }

/* 증상 체크리스트 — 증상과 원인을 한 줄에 붙여 읽게 */
.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--alu-200); border: 1px solid var(--alu-200); }
.check { background: var(--paper); padding: 20px 20px 20px 44px; position: relative; }
.check::before { content: ""; position: absolute; left: 20px; top: 26px; width: 10px; height: 10px; background: var(--accent); }
.check b { display: block; font-size: 1rem; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 4px; }
.check span { display: block; font-size: 0.9rem; color: var(--text-muted); line-height: 1.62; }

/* 작업 범위 */
.scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scope-col h3 {
  font-size: 0.95rem; color: var(--ink); padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.scope-col li {
  font-size: 0.93rem; color: var(--text-muted); padding: 7px 0 7px 16px;
  position: relative; line-height: 1.55;
}
.scope-col li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 1.5px; background: var(--accent);
}

/* 부품 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips li {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .03em;
  color: var(--steel-700); background: var(--paper);
  border: 1px solid var(--alu-300); padding: 6px 11px;
}

/* FAQ */
.faq { border-top: 1px solid var(--alu-300); }
.faq details { border-bottom: 1px solid var(--alu-300); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 700; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--accent-deep); }
.faq .ans { padding: 0 0 20px; color: var(--text-muted); font-size: 0.96rem; max-width: 62ch; }

/* 다른 서비스 */
.siblings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sibling {
  border: 1px solid var(--alu-300); background: var(--paper); padding: 18px 16px;
  display: flex; flex-direction: column; gap: 5px; transition: border-color .16s ease, transform .16s ease;
}
.sibling:hover { border-color: var(--ink); transform: translateY(-2px); }
.sibling b { font-size: 1rem; color: var(--ink); letter-spacing: -0.02em; }
.sibling span { font-size: 0.86rem; color: var(--text-muted); }

/* --- 시공사례 ------------------------------------------------------------ */
/* 개요표 — 견적서 머리처럼 항목/값이 딱 떨어지게 */
.jobspec {
  margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--alu-200); border: 1px solid var(--alu-200);
}
.jobspec > div { background: var(--paper); padding: 16px 18px; }
.jobspec dt {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .12em;
  color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px;
}
.jobspec dd {
  margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.5;
}
.jobspec dd small { display: block; font-weight: 500; font-size: 0.86rem; color: var(--text-muted); margin-top: 3px; letter-spacing: 0; }

/* 현장 사진 — 도면 캡션처럼 아래에 주기를 단다 */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--alu-200); background: var(--alu-100); }
.shot figcaption {
  margin-top: 9px; padding-left: 13px; position: relative;
  font-size: 0.87rem; color: var(--text-muted); line-height: 1.6;
}
.shot figcaption::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--accent);
}
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
/* 대표컷은 본문 폭 전체를 쓰면 세로가 너무 길어진다. 가로 배너처럼 잘라 쓴다. */
.shot.lead img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
@media (max-width: 720px) { .shot.lead img { aspect-ratio: 4 / 3; } }

/* 작업 단락 — 사진과 설명을 나란히 */
.work { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(22px, 3.5vw, 44px); align-items: start; }
.work + .work { margin-top: clamp(34px, 4.5vw, 56px); padding-top: clamp(34px, 4.5vw, 56px); border-top: 1px solid var(--alu-200); }
.work:nth-child(even) .shot { order: 2; }
.work h3 { font-size: var(--step-1); color: var(--ink); margin-bottom: 12px; }
.work p { color: var(--text-muted); font-size: 0.97rem; line-height: 1.75; }
.work p + p { margin-top: 11px; }
.work .part {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .1em;
  color: var(--accent-deep); background: var(--alu-050);
  border: 1px solid var(--alu-200); padding: 4px 9px;
}

/* 원문 링크 — 페이지의 끝, 전화 다음에 오는 부차적 행동 */
.readmore {
  margin-top: clamp(30px, 4vw, 44px); padding: 20px 22px;
  border: 1px solid var(--alu-300); background: var(--alu-050);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.readmore p { font-size: 0.94rem; color: var(--text-muted); max-width: 46ch; }
.readmore b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 3px; letter-spacing: -0.02em; }
.readmore a.out {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.94rem; color: var(--ink);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.readmore a.out:hover { color: var(--accent-deep); }

/* 드롭다운 (헤더 서비스 메뉴) */
.has-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 208px; z-index: 70;
  background: var(--paper); border: 1px solid var(--alu-300);
  box-shadow: 0 18px 40px rgba(12,16,32,.16); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(5px); transition: all .16s ease;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a { padding: 9px 12px; font-size: 0.92rem; font-weight: 600; display: block; }
.drop a:hover { background: var(--alu-100); color: var(--ink); }

@media (max-width: 1000px) {
  .page-hero .shell { grid-template-columns: 1fr; align-items: start; }
  .scope { grid-template-columns: 1fr 1fr; }
  .siblings { grid-template-columns: repeat(2, 1fr); }
  .work { grid-template-columns: 1fr; }
  .work:nth-child(even) .shot { order: 0; }
}
@media (max-width: 720px) {
  .checks, .scope, .siblings { grid-template-columns: 1fr; }
  .jobspec { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .work { grid-template-columns: 1fr; }
  .work:nth-child(even) .shot { order: 0; }
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0 0 0 12px; display: none;
  }
  .has-drop.open .drop { display: block; }
}