@charset "utf-8";
/*
  오토카지 (Autocarz) — 원페이지 구성
  색상·글꼴은 기존 사이트에서 그대로 가져왔습니다.
    브랜드 #ea5b0c   본문 #212121 / #434343 / #757575
    배경   #ffffff / #f9f9f9
    글꼴   Pretendard (본문) · NanumBarunGothic (메뉴)
*/

/* 헤더와 디자인 토큰은 모든 페이지가 함께 쓰므로 따로 두었습니다 */
@import url('/assets/nav.css?v=42cc1308');
@import url("/assets/legacy/fonts/pretendard.css?v=0d61d8ba");


* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.75;
  word-break: keep-all; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }



/* ── 히어로 ────────────────────────────────────── */
.hero {
  position: relative; min-height: 660px; background: var(--bg-3); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* flex 아이템이 되면 margin:0 auto 가 stretch 를 무효화해 내용 폭으로 줄어든다.
   width:100% 로 폭을 되찾고, align-items 로 알약 배지가 늘어나지 않게 한다. */
.hero > .wrap {
  flex: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,16,13,.94) 0%, rgba(20,16,13,.78) 42%, rgba(20,16,13,.3) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(234,91,12,.16); border: 1px solid rgba(234,91,12,.4);
  color: #ffb27a; font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; color: #fff; margin-bottom: 22px; }
.hero h1 b { color: var(--brand); font-weight: 800; }
.hero p { font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255,255,255,.82); max-width: 34em; margin-bottom: 14px; }
.hero .sub { font-size: 15px; color: rgba(255,255,255,.6); max-width: 34em; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px; border-radius: 999px; font-size: 15px; font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-p { background: var(--brand); color: #fff; }
.btn-p:hover { background: var(--brand-dark); }
.btn-g { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-g:hover { background: rgba(255,255,255,.12); }
.hero-stats {
  position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
}
.hero-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 26px; padding-bottom: 26px; }
.hero-stats dt { font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.hero-stats dd { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; color: #fff; }
.hero-stats dd span { font-size: .55em; color: rgba(255,255,255,.6); margin-left: 3px; font-weight: 700; }

/* ── 섹션 공통 ─────────────────────────────────── */
.sec { padding: 96px 0; }
.sec.alt { background: var(--bg-2); }
.sec.dark { background: var(--bg-3); color: #fff; }
.sec-head { max-width: 40em; margin-bottom: 52px; }
.sec-head .eyebrow {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--brand); margin-bottom: 14px; text-transform: uppercase;
}
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin-bottom: 16px; }
.sec-head p { font-size: 17px; color: var(--ink-2); }
.sec.dark .sec-head p { color: rgba(255,255,255,.68); }

/* ── 카드 그리드 ───────────────────────────────── */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: #d8d2cb; box-shadow: 0 14px 32px -18px rgba(0,0,0,.22); transform: translateY(-2px); }
.card-img { aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.card-b { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.card h3 .tag {
  display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; vertical-align: 2px;
}
.card p { font-size: 15px; color: var(--ink-2); }
.card .meta { margin-top: auto; padding-top: 18px; }
.card .meta li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ink-3); padding: 5px 0; }
.card .meta b { color: var(--ink-2); font-weight: 700; min-width: 5.5em; }

/* ── 좌우 배치 ─────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
.split-media { border-radius: 16px; overflow: hidden; background: var(--bg-2); }
/* 세로로 긴 사진이 글보다 훨씬 길어져 한쪽만 늘어나 보이는 것을 막습니다.
   사진을 absolute 로 띄워 칸 높이 계산에서 빼면, 줄 높이는 글 쪽이 정하고
   사진은 그 높이에 맞춰 잘려 채워집니다(비율 유지). */
.split { align-items: stretch; }
.split > * { min-width: 0; align-self: center; }
.split-media {
  align-self: stretch; position: relative;
  min-height: 320px;          /* 글이 아주 짧아도 사진이 납작해지지 않도록 */
}
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 로고 모음처럼 잘리면 안 되는 이미지는 plain 을 붙여 원본 비율로 둡니다 */
.split-media.plain { align-self: center; position: static; min-height: 0; background: none; }
.split-media.plain img { position: static; height: auto; object-fit: contain; }
.split h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; margin-bottom: 18px; }
.split p + p { margin-top: 12px; }
.split .lead { font-size: 17px; color: var(--ink-2); }
.list { margin-top: 24px; }
.list li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.list li::before { content: ''; flex: 0 0 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--brand); }
.list li:first-child { border-top: 0; }

/* ── 요금/스펙 표 ──────────────────────────────── */
.spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.spec div { background: #fff; padding: 22px 20px; }
.spec dt { font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.spec dd { margin: 0; font-size: 19px; font-weight: 800; }
.sec.dark .spec { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.sec.dark .spec div { background: #1b1613; }
.sec.dark .spec dt { color: rgba(255,255,255,.5); }
.sec.dark .spec dd { color: #fff; }

/* ── 제휴 로고/혜택 ────────────────────────────── */
.perk { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; background: #fff; }
.perk h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.perk .note { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.perk dl { display: flex; flex-direction: column; gap: 10px; }
.perk .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.perk .row:last-child { border-bottom: 0; padding-bottom: 0; }
.perk dt { font-size: 14px; color: var(--ink-2); }
.perk dd { margin: 0; font-size: 18px; font-weight: 800; color: var(--brand); }
.badge-all { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #e8f6ee; color: #157a45; font-size: 11px; font-weight: 800; }

/* ── 연혁 ──────────────────────────────────────── */
.hist { display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px 28px; }
.hist dt { font-size: 22px; font-weight: 800; color: var(--brand); padding-top: 14px; }
.hist dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.hist dd li { display: flex; gap: 14px; padding: 4px 0; font-size: 15px; color: var(--ink-2); }
.hist dd li b { flex: 0 0 3.2em; font-weight: 700; color: var(--ink-3); font-size: 13.5px; padding-top: 2px; }

/* ── 문의 ──────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; }
.tel-list { display: grid; gap: 14px; margin-top: 30px; }
.tel {
  display: flex; align-items: baseline; gap: 16px; padding: 20px 24px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.04);
  transition: border-color .15s, background .15s;
}
.tel:hover { border-color: rgba(234,91,12,.6); background: rgba(234,91,12,.08); }
.tel .t { font-size: 13px; color: rgba(255,255,255,.55); min-width: 8.5em; }
.tel .n { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.info { font-size: 14.5px; color: rgba(255,255,255,.7); }
.info dt { float: left; clear: left; width: 6.5em; color: rgba(255,255,255,.45); padding: 7px 0; }
.info dd { margin: 0 0 0 6.5em; padding: 7px 0; }

/* ── 푸터 ──────────────────────────────────────── */
.foot { background: #0f0c0a; color: rgba(255,255,255,.5); padding: 52px 0 60px; font-size: 13.5px; }
.foot img { height: 28px; margin-bottom: 20px; opacity: .8; }
.foot p { line-height: 1.9; }
.foot .links { margin-top: 22px; display: flex; gap: 20px; }
.foot .links a:hover { color: #fff; }
.foot .copy { margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,.32); }

/* ── 반응형 ────────────────────────────────────── */
@media (max-width: 1023px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split, .contact { grid-template-columns: 1fr; gap: 36px; }
  .split.rev > :first-child { order: 0; }
  .spec { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .sec { padding: 64px 0; }
  .hero { min-height: 540px; }
  .hero-stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
  .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .hist { grid-template-columns: 1fr; gap: 0; }
  .hist dt { padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── 매장 찾기 (기존 지점정보 화면 재현) ─────────────── */
.shop-finder {
  display: grid; grid-template-columns: 380px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
}
.shop-panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
.shop-controls { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.shop-controls input[type="search"] {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.shop-controls input:focus, .shop-controls select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.shop-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.shop-selects select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2);
}
.shop-count { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.shop-count b { color: var(--brand); font-weight: 800; font-size: 15px; }

.shop-list { max-height: 560px; overflow-y: auto; }
.shop-list li + li { border-top: 1px solid var(--line); }
.shop-empty { padding: 40px 20px; text-align: center; font-size: 14px; color: var(--ink-3); }
.shop-item {
  display: flex; gap: 14px; width: 100%; text-align: left; padding: 16px 18px;
  border: 0; background: none; font: inherit; cursor: pointer; transition: background .15s;
}
.shop-item:hover { background: var(--bg-2); }
.shop-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.shop-thumb {
  flex: 0 0 76px; height: 66px; border-radius: 8px; overflow: hidden; background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shop-thumb-none { font-size: 26px; opacity: .35; }
.shop-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-wash { font-size: 12.5px; font-weight: 800; }
.w-hp  { color: #2f7fd4; } .w-hps { color: #1f9d55; } .w-st  { color: #e08a00; }
.shop-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.shop-addr { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.shop-tel { font-size: 13px; color: var(--brand); font-weight: 700; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.w-hp { background: #2f7fd4; } .dot.w-hps { background: #1f9d55; } .dot.w-st { background: #e08a00; }

/* 지도 칸은 스스로 높이를 가져야 합니다.
   position:absolute + inset:0 은 부모 높이가 확정돼야만 크기가 잡히는데,
   격자 안에서는 그 높이가 0으로 계산되는 경우가 있습니다. 그러면 지도는
   정상적으로 그려지면서도 높이 0 안에 들어가 화면에서 사라집니다. */
.shop-map-wrap { position: relative; display: grid; min-height: 640px; background: var(--bg-2); }
.shop-map { min-height: 640px; width: 100%; }
.shop-note {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 24em; margin: 0; padding: 18px 22px; text-align: center;
  font-size: 14px; line-height: 1.7; color: var(--ink-3);
  background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 12px;
}
.shop-pop {
  display: flex; flex-direction: column; gap: 4px; min-width: 200px;
  padding: 14px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 28px -14px rgba(0,0,0,.35);
  font-family: var(--font); font-size: 13px; color: var(--ink-2);
}
.shop-pop strong { font-size: 15px; color: var(--ink); }
.shop-pop a { color: var(--brand); font-weight: 700; }
.shop-pop-map { margin-top: 6px; font-size: 12.5px; }

@media (max-width: 899px) {
  .shop-finder { grid-template-columns: 1fr; }
  .shop-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .shop-list { max-height: 380px; }
  .shop-map-wrap { min-height: 380px; }
  .shop-map { min-height: 380px; }
}

/* ─────────────────────────── 배너 ─────────────────────────── */
.bn { position: relative; }
.bn[hidden] { display: none; }
.bn-track { position: relative; }
.bn-slide {
  display: block; position: relative; overflow: hidden;
  background: var(--bg-3); color: #fff; text-decoration: none;
}
.bn-slide.off { display: none; }
.bn-img { display: block; }
/* 배너 띠 높이는 자리마다 정해 둔다. 이미지 크기가 제각각이어도 줄 높이가
   흔들리지 않고, 이미지를 늦게 받아도 자리가 미리 잡혀 화면이 밀리지 않는다. */
[data-banner='main-top'] .bn-slide,
[data-banner='footer'] .bn-slide { aspect-ratio: 1600 / 260; }
[data-banner='service'] .bn-slide,
[data-banner='shop'] .bn-slide { aspect-ratio: 1600 / 500; }

/* 문구가 잘리지 않을 만큼은 확보한다 — 좁은 화면에서 비율만 따르면 너무 납작해진다 */
.bn-slide { min-height: 132px; }

/* height 100% 는 부모에게 높이가 있어야 먹는다. 없으면 0 으로 접히고,
   접힌 이미지는 lazy 로딩이 영영 걸리지 않아 배너가 문구 높이만 남는다. */
.bn-img { display: block; height: 100%; }
.bn-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 639px) {
  /* 세로가 긴 모바일 이미지에 맞춘다. 6:1 띠를 그대로 두면 손톱만 하게 보인다 */
  [data-banner='main-top'] .bn-slide,
  [data-banner='footer'] .bn-slide { aspect-ratio: 750 / 320; }
  [data-banner='service'] .bn-slide,
  [data-banner='shop'] .bn-slide { aspect-ratio: 750 / 500; }
}
.bn-copy {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 8px; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
}
.bn-slide:not(:has(.bn-img)) .bn-copy { position: static; }
.bn-title { font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; }
.bn-text { font-size: 14.5px; opacity: .82; }
/* 배너 버튼 — 여기서 다음 화면으로 넘어간다. 놓치기 쉬워서 크게 두고 깜빡이게 한다 */
.bn-cta-wrap { position: relative; display: inline-flex; align-items: center; }
.bn-cta {
  margin-top: 4px; display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  animation: bn-cta-blink .7s steps(1, end) infinite;
}
@keyframes bn-cta-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .45; }
}
a.bn-slide:hover .bn-cta { background: var(--brand-dark); animation: none; opacity: 1; }

/* "클릭" 말풍선 — 버튼 위에 뜨고 아래를 향한 화살표가 버튼을 가리킨다 */
.bn-cta-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  padding: 5px 12px; border-radius: 8px; white-space: nowrap;
  background: #fff; color: var(--brand); font-size: 13px; font-weight: 800; line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  animation: bn-cta-bob .7s ease-in-out infinite;
}
.bn-cta-tip::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
@keyframes bn-cta-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}

/* 움직임을 줄이도록 설정한 사람에게는 깜빡이지 않는다. 크기와 말풍선은 그대로 둔다 */
@media (prefers-reduced-motion: reduce) {
  .bn-cta, .bn-cta-tip { animation: none; }
}
.bn-dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.bn-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.42); transition: background .2s, transform .2s;
}
.bn-dot.on { background: #fff; transform: scale(1.25); }
.bn-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 메인 상단 — 히어로 바로 위, 가로 전체 */
.bn-main-top .bn-slide { min-height: 92px; }
.bn-main-top .bn-img img { max-height: 240px; }

/* 띠배너 — 낮고 넓게 */
.bn-service, .bn-shop, .bn-footer { padding: 0; }
.bn-service .bn-slide, .bn-shop .bn-slide, .bn-footer .bn-slide { min-height: 78px; }
.bn-service .bn-copy, .bn-shop .bn-copy, .bn-footer .bn-copy {
  flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 18px; padding-bottom: 18px;
}
.bn-service .bn-cta-wrap, .bn-shop .bn-cta-wrap, .bn-footer .bn-cta-wrap { margin-left: auto; }
.bn-service .bn-cta, .bn-shop .bn-cta, .bn-footer .bn-cta { margin-top: 0; }
.bn-service .bn-dots, .bn-shop .bn-dots, .bn-footer .bn-dots { bottom: 8px; }

/* ─────────────────────────── 뉴스 ─────────────────────────── */
.news-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.news-tab {
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-family: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.news-tab:hover { border-color: #d8d2cb; }
.news-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.news-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.news-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
a.news-card:hover {
  border-color: #d8d2cb; box-shadow: 0 14px 32px -18px rgba(0,0,0,.22); transform: translateY(-2px);
}
a.news-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.news-thumb { aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.news-cat {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.news-cat.cat-event { background: #eef4ff; color: #2f5fd4; }
.news-cat.cat-blog { background: #eaf7ee; color: #1a8b48; }        /* 네이버 초록 계열 */
.news-cat.cat-instagram { background: #fdeef4; color: #c1358a; }   /* 인스타 자홍 계열 */
.news-date { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.news-src { font-size: 12px; color: var(--ink-3); }
.news-src::before { content: '·'; margin-right: 8px; }
.news-card h3 { font-size: 17.5px; font-weight: 800; line-height: 1.5; margin-bottom: 10px; }
.news-card p {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.news-go { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 700; color: var(--brand); }
.news-go::after { content: ' →'; }
/* 바깥으로 나가는 링크임을 화살표 모양으로 구분합니다 */
.news-go.out::after { content: ' ↗'; }
.news-empty { padding: 56px 20px; text-align: center; font-size: 15px; color: var(--ink-3); }

/* ── 이벤트 ────────────────────────────────────────
   뉴스와 같은 카드 모양을 쓰되 세 칸으로 둡니다 — 포스터를 보고 들어오는
   화면이라 그림이 커야 합니다. 색·테두리·간격은 .news-card 를 그대로 따릅니다. */
.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ev-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
a.ev-card:hover {
  border-color: #d8d2cb; box-shadow: 0 14px 32px -18px rgba(0,0,0,.22); transform: translateY(-2px);
}
a.ev-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ev-card.done { opacity: .62; }
.ev-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-thumb .none { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--ink-3); }
.ev-badge {
  position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 800; background: var(--brand); color: #fff;
}
.ev-badge.off { background: rgba(0,0,0,.55); }
.ev-card .body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.ev-card h3 { font-size: 17.5px; font-weight: 800; line-height: 1.5; margin-bottom: 10px; }
.ev-when { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: auto; }

/* 상세 */
.ev-back {
  display: inline-block; margin-bottom: 26px; font-size: 14.5px;
  font-weight: 700; color: var(--ink-3); text-decoration: none;
}
.ev-back:hover { color: var(--brand); }
.ev-head { max-width: none; margin-bottom: 32px; }
.ev-head .eyebrow { display: inline-block; }
.ev-period { font-size: 14.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 10px; }
.ev-shots { display: grid; gap: 18px; margin-bottom: 34px; }
.ev-shots img { width: 100%; border-radius: 16px; border: 1px solid var(--line); }
.ev-body { font-size: 16px; line-height: 1.85; color: var(--ink-2); white-space: pre-line; max-width: 42em; }
.ev-cta { justify-content: flex-start; }

@media (max-width: 1023px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ev-grid { grid-template-columns: 1fr; } }
/*
 * hidden 은 언제나 통한다.
 *
 * 브라우저 기본값 [hidden]{display:none} 은 우리 규칙과 명시도가 같아서, 나중에 적은
 * .news-more{display:block} 이 이겨 버린다. 그래서 자바스크립트로 el.hidden = true 를
 * 줘도 화면에서 안 사라졌다 — "더 보기 (0)" 버튼이 늘 떠 있고, 탭이 셋 미만일 때도
 * 탭 줄이 남았다 (2026-09-08 확인). 여기서 한 번에 막는다.
 *
 * .bn[hidden] · .fcta-stack[hidden] · #instagram[hidden] 은 같은 문제를 하나씩 막아 둔
 * 것이라 이제 없어도 되지만, 지우면 그 화면을 다시 확인해야 하므로 그대로 둔다.
 */
[hidden] { display: none !important; }

.news-more {
  display: block; margin: 36px auto 0; padding: 13px 34px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.news-more:hover { border-color: var(--brand); color: var(--brand); }
.news-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 1199px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 모바일도 2열 — 카드가 좁아지므로 여백과 글자를 함께 줄입니다 */
@media (max-width: 639px) {
  .news-grid { gap: 12px; }
  .news-body { padding: 14px 14px 16px; }
  .news-meta { gap: 6px; margin-bottom: 8px; }
  .news-cat { font-size: 10.5px; padding: 3px 7px; }
  .news-date { font-size: 11px; }
  .news-card h3 { font-size: 14.5px; margin-bottom: 6px; }
  .news-card p { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; }
  .news-go { padding-top: 12px; font-size: 12px; }
  .news-cta { flex-direction: column; }
  .news-cta .btn { width: 100%; }
  .bn-service .bn-cta, .bn-shop .bn-cta, .bn-footer .bn-cta { margin-left: 0; }
}

/* ───────────────────── 플로팅 상담 버튼 ───────────────────── */
.fcta-stack {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: transform .25s ease;
}
.fcta-stack[hidden] { display: none; }
.fcta-stack.lift { transform: translateY(-96px); }

.fcta {
  display: flex; align-items: center; gap: 11px;
  min-width: 196px; padding: 10px 20px 10px 13px;
  border-radius: 999px; text-decoration: none; color: #fff;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fcta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,0,0,.5); filter: brightness(1.06); }
.fcta:active { transform: translateY(0); }
.fcta:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

.fcta-kakao { background: #eb6101; }   /* 기존 버튼 이미지에서 뽑은 색 */
.fcta-navy  { background: #003469; }   /* 현대 남색 */
.fcta-dark  { background: #05141f; }   /* 기아 검정 */

.fcta-mark {
  flex: 0 0 auto; width: 74px; height: 38px;
  display: grid; place-items: center;
}
.fcta-mark img { max-width: 74px; max-height: 38px; width: auto; height: auto; }
/* 로고 이미지가 없을 때만 쓰는 말풍선 */
.fcta-mark-kakao { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.fcta-mark-kakao svg { width: 21px; height: 21px; color: #3c1e1e; }

.fcta-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fcta-txt b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.fcta-txt span { font-size: 13.5px; font-weight: 700; opacity: .92; }
.fcta-kakao .fcta-txt b { font-size: 16px; }

@media (max-width: 899px) {
  .fcta-stack { right: 16px; bottom: 16px; gap: 8px; }
  .fcta-pc { display: none; }
  .fcta { min-width: 0; padding: 10px 18px 10px 12px; }
  .fcta-stack.lift { transform: translateY(-72px); }
}
@media (prefers-reduced-motion: reduce) {
  .fcta, .fcta-stack { transition: none; }
  .fcta:hover { transform: none; }
}

/* 문의 섹션 — 카카오톡 대표 창구 */
.kakao-lead { margin-top: 28px; }
.kakao-note { font-size: 13.5px; color: rgba(255,255,255,.5); margin: 12px 0 26px; max-width: 34em; }

/* 고정한 글 표시 */
.news-pin {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff;
}

/* 글 아래 이어지는 행동 */
.news-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 44px; }
.btn-o { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.btn-o:hover { border-color: var(--brand); color: var(--brand); }

/* ───────────── 매장 찾기 — 현재 위치 · 거리 · 묶은 마커 ───────────── */
.shop-geo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 8px; padding: 12px 16px;
  border: 0; border-radius: 10px; background: var(--brand); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.shop-geo:hover { background: var(--brand-dark); }
.shop-geo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.shop-geo[disabled] { opacity: .6; cursor: progress; }
.shop-geo.busy span { animation: shop-geo-spin 1s linear infinite; }
@keyframes shop-geo-spin { to { transform: rotate(360deg); } }

.shop-origin { color: var(--brand); font-weight: 700; }
.shop-origin::before { content: ' · '; color: var(--ink-3); font-weight: 400; }

.shop-line { display: flex; align-items: center; gap: 8px; }
.shop-dist {
  font-size: 12.5px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.shop-dist::before { content: '·'; margin-right: 8px; color: var(--ink-3); font-weight: 400; }
.shop-line > .shop-dist:first-child::before { content: none; margin: 0; }

.shop-list li { position: relative; }
.shop-acts { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 6px; }
.shop-act {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.shop-act:hover { border-color: var(--brand); color: var(--brand); }
.shop-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 겹친 마커를 하나로 묶어 개수만 표시 */
.shop-cluster {
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(234, 91, 12, .92); color: #fff;
  font-family: var(--font); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  cursor: pointer;
}

.shop-pop-dist { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.shop-pop-acts { display: flex; gap: 8px; margin-top: 8px; }
.shop-pop-acts a {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); color: var(--ink-2); background: #fff;
}
.shop-pop-acts a:first-child { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 639px) {
  .shop-acts { position: static; padding: 0 14px 12px; justify-content: flex-end; }
}

/* ───────────── 법인포인트 안내 페이지 ───────────── */
.pt-hero {
  position: relative; overflow: hidden;
  background: var(--pt-accent, var(--bg-3)); color: #fff;
  padding: 72px 0 0;
}
.pt-hero > .wrap { position: relative; z-index: 1; padding-bottom: 72px; }
.pt-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.62); margin-bottom: 14px;
}
.pt-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 800;
  line-height: 1.32; margin-bottom: 20px;
}
.pt-lead { font-size: 17px; color: rgba(255,255,255,.78); max-width: 34em; }
.pt-hero .hero-acts { margin-top: 32px; }
/* 카드 사진은 넓은 화면에서만 — 좁은 화면에서는 글자를 가립니다 */
.pt-hero-img { display: none; }
@media (min-width: 1000px) {
  .pt-hero > .wrap { max-width: var(--wrap); }
  .pt-hero-img {
    display: block; position: absolute; top: 0; right: 0; bottom: 0;
    width: 46%; z-index: 0;
  }
  .pt-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
  .pt-hero-img::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--pt-accent, var(--bg-3)) 0%, transparent 55%);
  }
  .pt-hero h1, .pt-lead, .pt-hero .hero-acts { max-width: 30em; }
}

/* 신청 절차 */
.steps { display: grid; gap: 16px; counter-reset: step; }
.step {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.step-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--ink-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.perk h3 a { color: inherit; }
.perk h3 a:hover { color: var(--brand); }
.perk-more { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--brand); }
.perk-more::after { content: ' →'; }

/* 법인포인트 — 신청 안내 */
.pt-apply {
  margin-top: 32px; padding: 32px 28px; text-align: center;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.pt-apply h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.pt-apply p { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; }

/* ───────────── 신청 폼 ───────────── */
.form-wrap { max-width: 720px; }
.form-wrap .sec-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 16px; }
.field { display: block; margin-bottom: 22px; border: 0; padding: 0; }
.f2 { display: grid; gap: 22px; }
@media (min-width: 640px) { .f2 { grid-template-columns: 1fr 1fr; } }
.lb { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
.lb b { color: var(--brand); font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.help { display: block; margin-top: 7px; font-size: 13px; color: var(--ink-3); }
.notes { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); line-height: 1.75; }
ul.notes { padding-left: 0; list-style: none; }
ul.notes li::before { content: '※ '; }
.consent { border: 1px solid var(--line); border-radius: 12px; padding: 22px 20px; background: var(--bg-2); }
.consent-rows { font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; }
.consent-rows div { display: flex; gap: 10px; padding: 4px 0; }
.consent-rows dt { flex: 0 0 5.5em; color: var(--ink-3); }
.consent-rows dd { margin: 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.form-msg { margin: 0 0 16px; padding: 13px 16px; border-radius: 10px; font-size: 14.5px; }
.form-msg.bad { background: #fdeceb; color: #b3261e; border: 1px solid #f5c6c2; }
#submitBtn[disabled] { opacity: .6; cursor: progress; }
.form-done { text-align: center; padding: 48px 20px; }
.form-done h2 { font-size: 24px; font-weight: 800; margin-bottom: 14px; }
.form-done p { font-size: 15.5px; color: var(--ink-2); line-height: 1.8; margin-bottom: 26px; }
.form-done a { color: var(--brand); }
.form-done .btn { color: #fff; }

/* ───────────── 인스타그램 피드 ───────────── */
#instagram[hidden] { display: none; }
/* 요청대로 PC 3열 · 모바일 2열 */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 639px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ig-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: inherit; text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ig-card:hover {
  border-color: #d8d2cb; box-shadow: 0 14px 32px -18px rgba(0,0,0,.22); transform: translateY(-2px);
}
.ig-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ig-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); overflow: hidden; }
.ig-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 영상·여러 장 표시 */
.ig-kind {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; line-height: 1;
}
.ig-kind.is-video { padding-left: 2px; }

.ig-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.ig-body b { font-size: 15px; font-weight: 800; line-height: 1.5; }
.ig-text {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.ig-date { font-size: 12.5px; color: var(--ink-3); margin-top: auto; padding-top: 4px; }

@media (max-width: 639px) {
  .ig-body { padding: 12px 12px 14px; gap: 4px; }
  .ig-body b { font-size: 13.5px; }
  .ig-text { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
  .ig-date { font-size: 11px; }
}

/* 후기 별점 — 아이콘 파일 없이 그린다. 별 다섯 개가 항상 같은 폭으로 서도록
   글자 대신 SVG 를 쓴다(폰트에 따라 ★ 의 폭이 달라진다). */
/* 회사명과 별점을 한 줄에 놓는다. 회사명이 길어 줄이 바뀌어도 별점이
   따라 내려가도록 wrap 을 허용한다. */
.byline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.byline .note { margin: 0; }
.rating { display: inline-flex; gap: 3px; }
.rating svg { width: 17px; height: 17px; fill: var(--brand); flex: none; }