/* 대장솔루션 홈페이지
   색과 글꼴 기준: DESIGN.md */

:root {
  --paper: #F2EAD3;
  --paper-deep: #E8DEC2;
  --ink: #201820;
  --pencil: #5E5648;
  --gold: #F0D038;

  --c-planning: #F59A3E;
  --c-interior: #9CC2A5;
  --c-studio: #F2A0AE;
  --c-fnb: #B9A6E0;
  --c-holdings: #D2B48C;

  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --s-14: 0.875rem;
  --s-16: 1rem;
  --s-20: 1.25rem;
  --s-25: 1.5625rem;
  --s-31: 1.953rem;
  --s-39: 2.441rem;
  --s-49: 3.052rem;
  --s-61: 3.815rem;
  --s-76: 4.768rem;

  --gutter: clamp(20px, 4vw, 48px);
  --max: 1280px;
  --rule: 2px solid var(--ink);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--s-16);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-feature-settings: "tnum" 0;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 100; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 공통 글자 ---------- */

.h-section {
  font-size: clamp(var(--s-39), 6vw, var(--s-76));
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.h-section .thin { font-weight: 250; }

.lead {
  font-size: clamp(var(--s-20), 2.4vw, var(--s-25));
  line-height: 1.6;
  max-width: 34em;
  letter-spacing: -0.02em;
}
.muted { color: var(--pencil); }

.section { padding: clamp(72px, 10vw, 128px) 0 0; }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 56px); }

/* 형광펜: 회사 색을 --hl 로 받는다 */
.hl {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em; right: -0.08em;
  top: 0.42em; bottom: 0.04em;
  background: var(--hl, var(--gold));
  clip-path: polygon(0.6% 12%, 99% 0%, 100% 86%, 1.5% 100%);
  transform: rotate(-0.8deg);
}

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: var(--rule);
  border-radius: 4px;
  font: inherit; font-weight: 800; font-size: var(--s-16);
  text-decoration: none;
  cursor: pointer;
  background: transparent; color: var(--ink);
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--gold); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.placeholder {
  border-bottom: 2px dashed currentColor;
  opacity: 0.75;
}

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--ink); }
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 76px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 900; font-size: var(--s-20);
  letter-spacing: -0.04em; flex-shrink: 0;
}
.logo img { width: 44px; height: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: block; padding: 8px 10px;
  text-decoration: none; font-weight: 700; font-size: 15px;
  letter-spacing: -0.02em;
}
.nav a[aria-current="page"] span { position: relative; z-index: 0; }
.nav a[aria-current="page"] span::before {
  content: ""; position: absolute; z-index: -1;
  left: -2px; right: -2px; top: 52%; bottom: -1px;
  background: var(--hl);
}
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.header-cta { flex-shrink: 0; min-height: 44px; padding: 8px 18px; }
.menu-btn { display: none; }

@media (max-width: 1080px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; margin-left: auto; min-height: 44px; padding: 8px 18px; }
  .site-header.is-open .nav {
    display: block;
    position: fixed; inset: 76px 0 0 0;
    background: var(--paper);
    border-top: var(--rule);
    padding: 24px var(--gutter);
    overflow-y: auto;
  }
  .site-header.is-open .nav ul { flex-direction: column; gap: 0; }
  .site-header.is-open .nav a {
    font-size: var(--s-31); font-weight: 900; padding: 14px 0;
    border-bottom: 1px solid rgba(32, 24, 32, .2);
  }
  .nav .nav-contact { display: block; margin-top: 24px; }
  .site-header.is-open .nav .nav-contact a { padding: 14px 22px; border-bottom: var(--rule); font-size: var(--s-25); }
}
@media (min-width: 1081px) { .nav .nav-contact { display: none; } }

/* ---------- 메인 첫 화면 ---------- */

.hero { padding: clamp(32px, 6vw, 72px) 0 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.hero-title {
  font-size: clamp(2.4rem, 5.4vw, 5.4rem);
  font-weight: 250;
  line-height: 1.12;
  letter-spacing: -0.055em;
}
.hero-title .w { font-weight: 900; position: relative; z-index: 0; white-space: nowrap; }
.hero-title .w::before {
  content: "";
  position: absolute; z-index: -1;
  left: -0.06em; right: -0.06em; top: 0.5em; bottom: 0.02em;
  background: var(--hl);
  clip-path: polygon(0.6% 14%, 99% 0%, 100% 84%, 1.2% 100%);
  transform: scaleX(0) rotate(-0.8deg);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.6, .05, .2, 1);
}
.hero-title .w.is-on::before { transform: scaleX(1) rotate(-0.8deg); }
.hero-sub {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(var(--s-20), 2.2vw, var(--s-31));
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.45;
}
.hero .btn-row { margin-top: 32px; }

.hero-photo { display: grid; gap: 14px; }
.hero-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: var(--rule);
  background: var(--paper-deep);
  overflow: hidden;
}
.hero-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-frame img.is-on { opacity: 1; }
.hero-caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  min-height: 3.4em;
}
.hero-caption strong { font-size: var(--s-20); font-weight: 900; letter-spacing: -0.03em; }
.hero-caption p { font-size: var(--s-14); color: var(--pencil); }
.hero-caption a { font-weight: 800; font-size: var(--s-14); white-space: nowrap; text-underline-offset: 4px; display: inline-block; padding: 10px 0; }
.hero-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hero-controls button {
  font: inherit; font-size: 13px; font-weight: 700;
  min-height: 40px; padding: 6px 12px;
  border: 1.5px solid var(--ink); border-radius: 3px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.hero-controls button[aria-pressed="true"] { background: var(--hl); }
.hero-controls .pause { margin-left: auto; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-frame { aspect-ratio: 4 / 5; max-height: 72vh; }
}

/* ---------- 소개 ---------- */

.intro-text {
  font-size: clamp(var(--s-25), 3.4vw, var(--s-49));
  font-weight: 800;
  line-height: 1.38;
  letter-spacing: -0.045em;
  max-width: 22em;
}
.intro-text .thin { font-weight: 300; }

.pains {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: var(--rule);
}
.pains li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px 32px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(32, 24, 32, .25);
  align-items: baseline;
}
.pains .pain { font-size: var(--s-20); font-weight: 700; letter-spacing: -0.03em; }
.pains a { font-weight: 800; text-underline-offset: 5px; display: inline-block; padding: 8px 0; }
.pains a .hl::before { top: 0.5em; }
@media (max-width: 700px) { .pains li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- 숫자 ---------- */

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.figures > div {
  padding: 28px 20px 30px;
  border-left: 1px solid rgba(32, 24, 32, .3);
}
.figures > div:first-child { border-left: 0; padding-left: 0; }
.figures dt { order: 2; font-size: var(--s-14); color: var(--pencil); line-height: 1.5; margin-top: 10px; }
.figures dd {
  font-size: clamp(var(--s-49), 6vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figures dd small { font-size: 0.4em; font-weight: 800; letter-spacing: -0.02em; margin-left: 2px; }
.figures > div { display: flex; flex-direction: column; }
.figures-note { margin-top: 14px; font-size: var(--s-14); color: var(--pencil); }
@media (max-width: 860px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .figures > div:nth-child(n+3) { border-top: 1px solid rgba(32, 24, 32, .3); }
}

/* ---------- 바인더 탭 (계열사 줄) ---------- */

.tabs { border-top: var(--rule); }
.tab-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px;
  gap: 12px 32px;
  padding: 30px 0;
  border-bottom: var(--rule);
  text-decoration: none;
  align-items: start;
}
.tab-row h3 {
  font-size: clamp(var(--s-31), 4.2vw, var(--s-61));
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.tab-row h3 small { display: block; font-size: var(--s-14); font-weight: 700; letter-spacing: 0; color: var(--pencil); margin-bottom: 8px; }
.tab-row .what { font-size: var(--s-20); font-weight: 700; letter-spacing: -0.03em; line-height: 1.45; }
.tab-row .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  display: inline-block;
  font-size: var(--s-14); font-weight: 700;
  padding: 3px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
}
.tab-row .tab {
  align-self: stretch;
  background: var(--hl);
  border: var(--rule);
  border-right: 0;
  margin: -32px calc(var(--gutter) * -1) -32px 0;
  writing-mode: vertical-rl;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--s-16);
  letter-spacing: 0.08em;
  transition: margin .25s ease;
}
.tab-row:hover .tab, .tab-row:focus-visible .tab { margin-left: -16px; }
.tab-row:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
@media (max-width: 760px) {
  .tab-row { grid-template-columns: minmax(0, 1fr) 40px; padding: 24px 0; }
  .tab-row .body { grid-column: 1; }
  .tab-row .tab { grid-row: 1 / span 2; grid-column: 2; font-size: var(--s-14); }
}

/* ---------- 대표 ---------- */

.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.leader figure { border: var(--rule); aspect-ratio: 4 / 5; max-width: 480px; overflow: hidden; background: var(--paper-deep); }
.leader figure img { width: 100%; height: 100%; object-fit: cover; }
.leader h3 { margin-top: 22px; font-size: var(--s-31); font-weight: 900; letter-spacing: -0.04em; }
.leader h3 small { font-size: var(--s-16); font-weight: 600; color: var(--pencil); margin-left: 8px; letter-spacing: -0.01em; }
.leader .motto { margin-top: 6px; font-size: var(--s-20); font-weight: 300; letter-spacing: -0.03em; }
.leader ul { margin-top: 18px; border-top: 1px solid rgba(32, 24, 32, .3); }
.leader li { padding: 10px 0; border-bottom: 1px solid rgba(32, 24, 32, .3); }
@media (max-width: 760px) { .leaders { grid-template-columns: 1fr; } }

/* ---------- 연혁 ---------- */

.timeline li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(32, 24, 32, .3);
}
.timeline li:last-child { border-bottom: var(--rule); }
.timeline time { font-size: var(--s-31); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.timeline p { font-size: var(--s-20); font-weight: 600; letter-spacing: -0.02em; padding-top: 4px; }
.timeline li.is-now time { position: relative; z-index: 0; }
.timeline li.is-now time::before { content: ""; position: absolute; z-index: -1; left: -4px; right: -4px; top: 45%; bottom: 0; background: var(--gold); }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- 고객사 흐름 ---------- */

.clients { overflow: hidden; border-top: var(--rule); border-bottom: var(--rule); padding: 26px 0; }
.clients-track { display: flex; width: max-content; animation: flow 48s linear infinite; }
.clients:hover .clients-track, .clients.is-paused .clients-track { animation-play-state: paused; }
.clients ul { display: flex; flex-shrink: 0; }
.clients li {
  font-size: clamp(var(--s-25), 3.4vw, var(--s-49));
  font-weight: 900; letter-spacing: -0.05em;
  padding: 0 0.7em; white-space: nowrap;
}
.clients li:nth-child(odd) { font-weight: 250; }
@keyframes flow { to { transform: translateX(-50%); } }

/* ---------- 문의 ---------- */

.contact {
  text-align: center;
  padding: clamp(96px, 12vw, 160px) 0 clamp(80px, 10vw, 128px);
}
.contact .mascot { position: relative; width: 150px; margin: 0 auto 28px; }
.contact .bubble {
  position: absolute; left: 118px; top: 6px;
  white-space: nowrap;
  background: var(--paper); border: var(--rule); border-radius: 18px 18px 18px 4px;
  padding: 8px 14px; font-weight: 800; font-size: var(--s-14);
}
.contact h2 { font-size: clamp(var(--s-39), 6.4vw, var(--s-76)); font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; }
.contact .lead { margin: 22px auto 0; }
.contact .btn-row { justify-content: center; margin-top: 36px; }
@media (max-width: 520px) { .contact .bubble { left: 50%; top: -44px; transform: translateX(-50%); border-radius: 18px; } .contact .mascot { margin-top: 56px; } }

/* ---------- 푸터 ---------- */

.site-footer { background: var(--ink); color: var(--paper); padding: 0 0 48px; }
.stripe { display: grid; grid-template-columns: repeat(5, 1fr); height: 8px; }
.stripe span:nth-child(1) { background: var(--c-planning); }
.stripe span:nth-child(2) { background: var(--c-interior); }
.stripe span:nth-child(3) { background: var(--c-studio); }
.stripe span:nth-child(4) { background: var(--c-fnb); }
.stripe span:nth-child(5) { background: var(--c-holdings); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-top: 56px;
}
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand img { height: 92px; width: auto; }
.footer-brand strong { display: block; font-size: var(--s-25); font-weight: 900; letter-spacing: -0.04em; }
.footer-brand p { margin-top: 6px; color: rgba(242, 234, 211, .78); }
.site-footer h2 { font-size: var(--s-14); font-weight: 700; color: rgba(242, 234, 211, .7); margin-bottom: 12px; }
.site-footer li { padding: 3px 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--gold); }
.legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(242, 234, 211, .25); font-size: var(--s-14); color: rgba(242, 234, 211, .72); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 계열사 페이지 ---------- */

.co-hero { padding: clamp(40px, 6vw, 80px) 0 0; }
.co-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.co-name {
  font-size: clamp(3rem, 9vw, 8.25rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 1;
}
.co-name small { display: block; font-size: var(--s-16); font-weight: 700; letter-spacing: -0.01em; color: var(--pencil); margin-bottom: 18px; }
.co-slogan {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(var(--s-25), 3.2vw, var(--s-39));
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 1.32;
}
.co-slogan b { font-weight: 900; }
.co-hero .lead { margin-top: 20px; }
.co-hero figure { border: var(--rule); aspect-ratio: 16 / 11; overflow: hidden; background: var(--paper-deep); }
.co-hero figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .co-hero-grid { grid-template-columns: 1fr; } }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule); }
.points > div { padding: 26px 32px 30px 0; border-bottom: 1px solid rgba(32, 24, 32, .3); }
.points > div:nth-child(even) { padding-left: 32px; padding-right: 0; border-left: 1px solid rgba(32, 24, 32, .3); }
.points h3 { font-size: var(--s-25); font-weight: 900; letter-spacing: -0.04em; line-height: 1.3; }
.points p { margin-top: 10px; max-width: 30em; }
.points ul { margin-top: 10px; }
.points li { padding-left: 1em; text-indent: -1em; }
.points li::before { content: "– "; }
@media (max-width: 760px) {
  .points { grid-template-columns: 1fr; }
  .points > div, .points > div:nth-child(even) { padding: 22px 0; border-left: 0; }
}

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--rule); }
.steps > li { padding: 24px 22px 28px 0; border-right: 1px solid rgba(32, 24, 32, .3); }
.steps > li + li { padding-left: 22px; }
.steps > li:last-child { border-right: 0; }
.steps .no { display: block; font-size: var(--s-49); font-weight: 900; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.steps .no::after { content: ""; display: block; width: 1.4em; height: 0.28em; margin-top: 8px; background: var(--hl); }
.steps h3 { margin-top: 16px; font-size: var(--s-20); font-weight: 900; letter-spacing: -0.03em; }
.steps p { margin-top: 8px; }
.steps ul { margin-top: 12px; font-size: var(--s-14); color: var(--pencil); }
.steps ul li { padding: 3px 0; border-top: 1px dotted rgba(32, 24, 32, .35); }
@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > li:nth-child(2) { border-right: 0; }
  .steps > li:nth-child(3) { padding-left: 0; }
  .steps > li:nth-child(n+3) { border-top: 1px solid rgba(32, 24, 32, .3); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .steps > li, .steps > li + li { padding: 22px 0; border-right: 0; border-top: 1px solid rgba(32, 24, 32, .3); }
}

/* 상품과 가격 */
.plans { display: grid; gap: 0; border-top: var(--rule); }
.plan {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 20px 32px;
  padding: 30px 0;
  border-bottom: var(--rule);
}
.plan h3 { font-size: var(--s-31); font-weight: 900; letter-spacing: -0.045em; line-height: 1.2; }
.plan .for { margin-top: 8px; color: var(--pencil); }
.plan ul li { padding: 5px 0; border-bottom: 1px dotted rgba(32, 24, 32, .35); }
.plan .cost { text-align: right; }
.plan .cost strong { display: block; font-size: var(--s-39); font-weight: 900; letter-spacing: -0.05em; line-height: 1.1; }
.plan .cost span { display: block; font-size: var(--s-14); color: var(--pencil); margin-top: 6px; }
.plan .cost .badge { display: inline-block; margin-top: 10px; padding: 2px 10px; background: var(--hl); font-weight: 800; font-size: var(--s-14); color: var(--ink); }
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; }
  .plan .cost { text-align: left; }
}

/* 가격 숨김: assets/js/config.js 의 SHOW_PRICES */
.price-alt { display: none; }
.prices-hidden .price { display: none !important; }
.prices-hidden .price-alt { display: block; }

.compare { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule); }
.compare > div { padding: 24px; }
.compare > div + div { border-left: var(--rule); background: var(--hl); }
.compare strong { display: block; font-size: var(--s-39); font-weight: 900; letter-spacing: -0.05em; }
.compare p { font-size: var(--s-14); }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: var(--rule); } }

/* 작업 사례 */
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.case:nth-child(6n+1) { grid-column: span 7; }
.case:nth-child(6n+2) { grid-column: span 5; margin-top: 18%; }
.case:nth-child(6n+3) { grid-column: span 5; }
.case:nth-child(6n+4) { grid-column: span 7; margin-top: -9%; }
.case:nth-child(6n+5) { grid-column: span 6; }
.case:nth-child(6n+6) { grid-column: span 6; margin-top: 10%; }
.case figure { border: var(--rule); overflow: hidden; background: var(--paper-deep); aspect-ratio: 4 / 3; }
.case:nth-child(3n) figure { aspect-ratio: 1 / 1; }
.case figure img { width: 100%; height: 100%; object-fit: cover; }
.case h3 { margin-top: 14px; font-size: var(--s-20); font-weight: 900; letter-spacing: -0.03em; }
.case p { font-size: var(--s-14); color: var(--pencil); margin-top: 2px; }
@media (max-width: 760px) {
  .cases { grid-template-columns: 1fr; }
  .case:nth-child(n) { grid-column: auto; margin-top: 0; }
}

.figures.result-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .figures.result-figures { grid-template-columns: 1fr; } .figures.result-figures > div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(32, 24, 32, .3); } .figures.result-figures > div:first-child { border-top: 0; } }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list li { font-size: var(--s-16); font-weight: 700; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 3px; }

.note { margin-top: 18px; font-size: var(--s-14); color: var(--pencil); max-width: 44em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .clients-track { flex-wrap: wrap; width: auto; }
  .clients ul[aria-hidden="true"] { display: none; }
  .clients ul { flex-wrap: wrap; row-gap: 8px; }
}

/* =====================================================================
   1-1 (2026-11-11): 로고 교체, 둥근 제목 글꼴, 색을 더 적극적으로
   ===================================================================== */

@font-face {
  font-family: "Cafe24Ssurround";
  src: url("../fonts/Cafe24Ssurround.woff") format("woff");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Cafe24SsurroundAir";
  src: url("../fonts/Cafe24SsurroundAir.woff") format("woff");
  font-weight: 300; font-display: swap;
}

:root {
  --orange: #EE862F;          /* 로고 */
  --c-planning: #F5C518;      /* 대장기획: 로고 주황과 겹치지 않게 노랑으로 */
  --display: "Cafe24Ssurround", var(--font);
  --display-air: "Cafe24SsurroundAir", var(--font);
  --shadow: 4px 4px 0 var(--ink);
}

/* 제목은 둥근 글꼴, 자간은 덜 조인다 */
.h-section, .hero-title .w, .co-name, .tab-row h3, .figures dd, .contact h2,
.timeline time, .plan h3, .plan .cost strong, .compare strong, .leader h3, .steps .no,
.intro-text, .co-slogan b, .clients li, .points h3, .steps h3, .case h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.h-section .thin, .hero-title, .co-slogan, .intro-text .thin, .clients li:nth-child(odd), .leader .motto {
  font-family: var(--display-air);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.hero-title { line-height: 1.2; }
.hero-title .w { line-height: 1.2; }
.co-name { line-height: 1.05; }
.h-section { line-height: 1.15; }
.figures dd { letter-spacing: -0.03em; }

.logo img { width: 135px; height: auto; }

/* 버튼: 알약 모양 + 딱딱한 그림자 */
.btn {
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); background: var(--orange); color: var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ink:hover { background: var(--orange); color: var(--ink); }
.menu-btn, .header-cta { box-shadow: 3px 3px 0 var(--ink); }

/* 첫 화면: 사진 틀에 회사 색 그림자, 스티커 */
.hero-photo { position: relative; }
.hero-frame {
  border-radius: 28px;
  box-shadow: 12px 12px 0 var(--hl);
  transition: box-shadow .5s ease;
}
.hero-controls button { border-radius: 999px; border-width: 2px; }
.hero-controls button[aria-pressed="true"] { box-shadow: 2px 2px 0 var(--ink); }
.sticker {
  position: absolute; top: -26px; right: -18px; z-index: 2;
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: var(--c-planning); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: var(--shadow);
  font-family: var(--display); font-size: 13px; line-height: 1.25;
  text-decoration: none;
  transform: rotate(10deg);
  transition: transform .2s ease;
}
.sticker b { display: block; font-size: 21px; font-weight: 700; margin-top: 4px; }
.sticker:hover { transform: rotate(0deg) scale(1.04); }
@media (max-width: 860px) { .sticker { top: -20px; right: -6px; width: 112px; height: 112px; } .sticker b { font-size: 18px; } }

/* 주황 띠 (흐르는 글자) */
.ribbon {
  margin-top: clamp(56px, 8vw, 96px);
  background: var(--orange);
  border-top: var(--rule); border-bottom: var(--rule);
  transform: rotate(-2deg);
  margin-left: -20px; margin-right: -20px;
  overflow: hidden;
  padding: 14px 0;
}
.ribbon-track { display: flex; width: max-content; animation: flow 40s linear infinite; }
.ribbon span { font-family: var(--display); font-size: clamp(var(--s-20), 2.6vw, var(--s-31)); white-space: nowrap; padding: 0 0.5em; }
.ribbon i { font-style: normal; font-size: clamp(var(--s-20), 2.6vw, var(--s-31)); padding: 0 0.3em; }
.ribbon i:nth-of-type(5n+1) { color: var(--c-planning); }
.ribbon i:nth-of-type(5n+2) { color: var(--paper); }
.ribbon i:nth-of-type(5n+3) { color: var(--c-studio); }
.ribbon i:nth-of-type(5n+4) { color: var(--c-fnb); }
.ribbon i:nth-of-type(5n) { color: var(--c-interior); }
html, body { overflow-x: clip; }

/* 이럴 때: 회사 링크를 색 알약으로 */
.pains a {
  justify-self: start;
  background: var(--hl); border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 18px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink);
}
.pains a .hl::before { display: none; }
.pains a:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }

/* 숫자: 회사 색 칸, 살짝 기울인 스티커 느낌 */
.figures { border: 0; gap: 18px; }
.figures > div, .figures > div:first-child {
  padding: 26px 24px 28px; border: 2px solid var(--ink); border-radius: 24px;
  box-shadow: var(--shadow);
}
.figures > div:nth-child(1) { background: var(--c-planning); transform: rotate(-1.2deg); }
.figures > div:nth-child(2) { background: var(--c-interior); transform: rotate(0.8deg); }
.figures > div:nth-child(3) { background: var(--c-studio); transform: rotate(-0.6deg); }
.figures > div:nth-child(4) { background: var(--c-fnb); transform: rotate(1.1deg); }
.figures dt { color: var(--ink); }
@media (max-width: 860px) {
  .figures > div:nth-child(n) { border-top: 2px solid var(--ink); padding-left: 24px; border-left: 2px solid var(--ink); }
}
.figures.result-figures > div:nth-child(n) { border: 2px solid var(--ink); padding-left: 24px; }

/* 계열사 줄: 회사 색으로 꽉 채운 둥근 판 */
.tabs { border-top: 0; display: grid; gap: 16px; }
.tab-row {
  background: var(--hl);
  border: 2px solid var(--ink);
  border-radius: 28px;
  padding: 28px 32px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 64px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tab-row .tag { background: var(--paper); border-radius: 999px; border-width: 2px; }
.tab-row .tab {
  margin: 0; border: 2px solid var(--ink); border-radius: 50%;
  width: 64px; height: 64px; align-self: center;
  writing-mode: horizontal-tb; background: var(--paper);
  font-size: 0;
}
.tab-row .tab::after { content: "보기"; font-family: var(--display); font-size: 15px; }
.tab-row:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.tab-row:hover .tab, .tab-row:focus-visible .tab { margin: 0; background: var(--ink); color: var(--paper); }
.tab-row:hover h3 { text-decoration: none; }
@media (max-width: 760px) {
  .tab-row { padding: 22px; grid-template-columns: minmax(0, 1fr) 52px; }
  .tab-row .tab { width: 52px; height: 52px; grid-row: 1; grid-column: 2; }
  .tab-row .tab::after { font-size: 13px; }
}

/* 대표·연혁 */
.leader figure { border-radius: 28px; box-shadow: 10px 10px 0 var(--orange); }
.timeline li.is-now time::before { background: var(--orange); }
.timeline time { color: var(--ink); }

/* 고객사 흐름: 주황 구분 별 */
.clients { background: var(--paper-deep); }
.clients li::after { content: "✱"; font-family: var(--font); font-weight: 400; color: var(--orange); margin-left: 1.4em; font-size: 0.6em; vertical-align: middle; }

/* 문의: 주황 바탕 */
.contact { background: var(--orange); border-top: var(--rule); }
.contact-mark {
  width: 120px; height: 120px; margin: 0 auto 28px; display: block;
  border: 6px solid var(--paper); border-radius: 18px; box-shadow: var(--shadow);
  transform: rotate(-7deg);
}
.contact .btn { background: var(--paper); }
.contact .btn-ink { background: var(--ink); color: var(--paper); }
.contact .btn:hover { background: var(--c-planning); color: var(--ink); }

/* 푸터 */
.footer-brand img { height: 60px; width: auto; }
.stripe { height: 14px; }

/* 계열사 페이지: 첫 화면을 회사 색 판으로 */
.co-hero { padding-top: clamp(24px, 4vw, 48px); }
.co-hero > .wrap {
  background: var(--hl);
  border: 2px solid var(--ink); border-radius: 36px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 8px 8px 0 var(--ink);
  max-width: calc(var(--max) + var(--gutter) * 2 - 2 * var(--gutter));
  width: calc(100% - var(--gutter) * 2);
}
.co-hero .hl::before { background: var(--paper); }
.co-hero figure { border-radius: 24px; background: var(--paper); }
.co-hero .lead { color: var(--ink); }

.points { border-top: 0; gap: 16px; }
.points > div, .points > div:nth-child(even) {
  border: 2px solid var(--ink); border-radius: 24px; padding: 24px 26px;
  background: var(--paper); border-left: 2px solid var(--ink);
}
.points > div:nth-child(4n+1), .points > div:nth-child(4n) { background: color-mix(in srgb, var(--hl) 35%, var(--paper)); }
@media (max-width: 760px) { .points > div, .points > div:nth-child(even) { padding: 22px; } }

.steps .no {
  display: grid; place-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--hl); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: var(--s-25);
}
.steps .no::after { display: none; }

.plans { border-top: 0; gap: 16px; }
.plan { border: 2px solid var(--ink); border-radius: 28px; padding: 28px 30px; box-shadow: var(--shadow); background: var(--paper); }
.plan:nth-child(1) { background: color-mix(in srgb, var(--hl) 30%, var(--paper)); }
.plan .cost .badge { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; transform: rotate(-3deg); }
.compare { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }

.case figure { border-radius: 24px; }
.case:nth-child(odd) figure { box-shadow: 8px 8px 0 var(--hl); }
.case:nth-child(even) figure { box-shadow: -8px 8px 0 var(--orange); }

.pill-list li { border-radius: 999px; border-width: 2px; background: var(--hl); }
.tag { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
}
.figures dd { white-space: nowrap; }
@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
  .figures > div:nth-child(n) { transform: none; }
  .figures > div:nth-child(odd) { transform: rotate(-0.8deg); }
  .figures > div:nth-child(even) { transform: rotate(0.8deg); }
}

/* =====================================================================
   1-2 (2026-11-11): 탁한 색을 쨍하게
   ===================================================================== */
:root {
  --paper: #FFF7E2;
  --paper-deep: #FFEFC7;
  --c-planning: #FFD21F;
  --c-interior: #33DDB0;
  --c-studio: #FF6FAE;
  --c-fnb: #A98BFF;
  --c-holdings: #4FB6FF;
}
.points > div:nth-child(4n+1), .points > div:nth-child(4n) { background: color-mix(in srgb, var(--hl) 28%, #fff); }
.plan:nth-child(1) { background: color-mix(in srgb, var(--hl) 28%, #fff); }
.clients { background: var(--c-planning); }
.clients li::after { color: var(--ink); }
.site-header { background: var(--paper); }
.ribbon i:nth-of-type(5n+2) { color: var(--ink); }
.co-hero figure, .tab-row .tag { background: #fff; }

/* =====================================================================
   1-3 (2026-11-11): 눈이 편한 키치 팔레트
   강한 색 = 작은 면적(형광펜, 그림자, 알약, 번호, 스티커)
   연한 색 = 넓은 면적(계열사 판, 숫자 칸, 회사 첫 화면)
   색 순서와 값은 dataviz 검증기로 색약 구분(ΔE 11.7)·일반 구분(ΔE 19.4) 통과
   ===================================================================== */
:root {
  --paper: #FBFAF7;
  --paper-deep: #F5F3EE;

  --c-planning: #F9DB38;  --c-planning-soft: #FFF2AB;
  --c-interior: #43DAB0;  --c-interior-soft: #B6F9E0;
  --c-studio:   #A181EF;  --c-studio-soft:   #E5DBFF;
  --c-fnb:      #FE85A4;  --c-fnb-soft:      #FFD6DE;
  --c-holdings: #47B7F1;  --c-holdings-soft: #C0EEFF;
  --orange-soft: #FFDCBD;
  --hl-soft: var(--c-planning-soft);
}

/* 넓은 면적은 연한 색 */
.tab-row { background: var(--hl-soft); }
.tab-row:hover { background: var(--hl); }
.figures > div:nth-child(1) { background: var(--c-planning-soft); }
.figures > div:nth-child(2) { background: var(--c-interior-soft); }
.figures > div:nth-child(3) { background: var(--c-studio-soft); }
.figures > div:nth-child(4) { background: var(--c-fnb-soft); }
.figures > div { box-shadow: 4px 4px 0 var(--ink); }
.co-hero > .wrap { background: var(--hl-soft); }
.co-hero .hl::before { background: var(--hl); }
.points > div:nth-child(4n+1), .points > div:nth-child(4n) { background: var(--hl-soft); }
.plan:nth-child(1) { background: var(--hl-soft); }
.compare > div + div { background: var(--hl-soft); }
.clients { background: var(--c-planning-soft); }
.contact { background: var(--orange-soft); margin-top: clamp(72px, 10vw, 128px); }
.contact .btn:hover { background: var(--orange); }

/* 작은 면적은 강한 색: 그림자에 색을 넣어 키치하게 */
.tab-row .tag { background: #fff; }
.figures > div:nth-child(1) dd small, .figures > div dd small { color: var(--ink); }
.leader figure { box-shadow: 10px 10px 0 var(--c-fnb); }
.leaders .leader:nth-child(2) figure { box-shadow: 10px 10px 0 var(--c-holdings); }
.ribbon i:nth-of-type(5n+2) { color: var(--c-interior); }

/* =====================================================================
   1-4 (2026-11-11): 연한 색 채도 살짝 올림, 첫 화면을 마우스에 반응하는 전체 화면으로
   ===================================================================== */
:root {
  --c-planning-soft: #FFF093;
  --c-interior-soft: #A4FBDD;
  --c-studio-soft:   #E0D2FF;
  --c-fnb-soft:      #FFC7D3;
  --c-holdings-soft: #B4EDFF;
  --orange-soft:     #FFD8B1;
}

.hero2 {
  position: relative;
  min-height: calc(100svh - 76px);
  min-height: max(620px, calc(100svh - 76px));
  display: flex;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-bottom: var(--rule);
}
.stage { position: absolute; inset: 0; }
.stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transform: scale(1.04);
  transition: opacity 1s ease, transform 6s ease;
}
.stage img.is-on { opacity: 1; transform: scale(1); }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(32, 24, 32, .82) 0%, rgba(32, 24, 32, .62) 55%, rgba(32, 24, 32, .38) 100%);
}
.hero2-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(24px, 3vw, 36px);
}
.hero2-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.3rem, 5.4vw, 5.5rem);
  line-height: 1.22; letter-spacing: -0.02em;
  max-width: 15em;
}
.hero2-title .w {
  color: var(--paper); text-decoration: none;
  border-radius: 0.28em; padding: 0 0.14em; margin: 0 -0.14em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero2-title .w:nth-of-type(even) { font-family: var(--display-air); font-weight: 300; }
.hero2-title .w.is-on { background: var(--hl); color: var(--ink); box-shadow: 5px 5px 0 var(--paper); }
.hero2-title .w:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.hero2-title .sep { color: rgba(251, 250, 247, .55); }
.hero2-title .tail { font-family: var(--display-air); font-weight: 300; color: rgba(251, 250, 247, .9); }
.hero2-sub { margin-top: 22px; font-size: clamp(var(--s-16), 1.6vw, var(--s-20)); font-weight: 600; color: rgba(251, 250, 247, .9); max-width: 34em; }

.hero2-bottom {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px;
}
.hero2-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 18px;
  background: rgba(32, 24, 32, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1.5px solid rgba(251, 250, 247, .35); border-radius: 20px;
  color: var(--paper); text-decoration: none;
  max-width: 560px;
}
.hero2-card .count { font-weight: 800; font-size: var(--s-14); font-variant-numeric: tabular-nums; color: rgba(251, 250, 247, .75); white-space: nowrap; }
.hero2-card .count b { color: var(--paper); }
.hero2-card .chip { background: var(--hl); color: var(--ink); font-weight: 800; font-size: var(--s-14); padding: 4px 12px; border-radius: 999px; white-space: nowrap; transition: background .25s; }
.hero2-card .text { font-weight: 700; font-size: var(--s-16); line-height: 1.4; }
.hero2-card .go {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-content: center;
  border: 1.5px solid rgba(251, 250, 247, .7); font-family: var(--display); font-size: 13px;
  transition: background .2s, color .2s;
}
.hero2-card:hover .go { background: var(--hl); color: var(--ink); border-color: var(--hl); }

.hero2-dots { justify-self: center; display: flex; align-items: center; gap: 2px; }
.hero2-dots .dot {
  width: 28px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.hero2-dots .dot::before {
  content: ""; width: 10px; height: 10px; border-radius: 999px;
  background: rgba(251, 250, 247, .5); transition: width .3s ease, background .3s;
}
.hero2-dots .dot[aria-pressed="true"] { width: 48px; }
.hero2-dots .dot[aria-pressed="true"]::before { width: 36px; background: var(--hl); }
.hero2-dots .dot:focus-visible { outline: 2px solid var(--paper); outline-offset: 0; }
.hero2-dots .pause {
  margin-left: 10px; font: inherit; font-size: 13px; font-weight: 800;
  min-height: 32px; padding: 4px 12px; border-radius: 999px;
  border: 1.5px solid rgba(251, 250, 247, .7); background: transparent; color: var(--paper); cursor: pointer;
}
.hero2-dots .pause:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.hint { display: flex; align-items: flex-end; gap: 10px; }
.hint p {
  background: var(--paper); color: var(--ink);
  font-weight: 800; font-size: var(--s-14);
  padding: 8px 14px; border-radius: 18px 18px 4px 18px;
  box-shadow: 3px 3px 0 var(--hl);
  margin-bottom: 44px;
}
.hint img { width: 72px; height: 72px; border: 4px solid var(--paper); border-radius: 14px; transform: rotate(-8deg); animation: nod 2.4s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(4deg) translateY(-4px); } }

.hero2 .sticker { top: clamp(20px, 3vw, 36px); right: var(--gutter); }

@media (max-width: 860px) {
  .hero2-bottom { grid-template-columns: 1fr; gap: 14px; }
  .hero2-dots { justify-self: start; }
  .hint { display: none; }
  .hero2-card { max-width: none; }
  .hero2 .sticker { top: auto; bottom: 150px; right: 16px; }
}
@media (max-width: 520px) {
  .hero2-card { flex-wrap: wrap; row-gap: 6px; }
  .hero2-card .text { flex: 1 1 100%; order: 3; }
  .hero2-card .go { order: 2; margin-left: auto; width: 44px; height: 44px; }
  .hero2 .sticker { bottom: 190px; width: 100px; height: 100px; }
  .hero2 .sticker b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage img { transition: none; transform: none; }
  .hint img { animation: none; }
}
.hero2-title .w { white-space: nowrap; }
@media (max-width: 760px) {
  .hero2-title { line-height: 1.42; }
  .hero2-title .w.is-on { box-shadow: 3px 3px 0 var(--paper); }
}
@media (max-width: 520px) { .hero2 .sticker { display: none; } }

/* =====================================================================
   1-5 (2026-11-11): 첫 화면 작은 요소 제거, 제목을 굵은 글씨 + 속 빈 외곽선 기울임으로
   ===================================================================== */
@font-face {
  font-family: "Cafe24Ssurround";
  src: url("../fonts/Cafe24Ssurround.woff") format("woff");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Cafe24SsurroundAir";
  src: url("../fonts/Cafe24SsurroundAir.woff") format("woff");
  font-weight: 300; font-display: swap;
}

.hero2-title { font-size: clamp(2.4rem, 5.8vw, 6rem); line-height: 1.24; }
.hero2-title .w,
.hero2-title .w:nth-of-type(even) {
  font-family: var(--display); font-weight: 700;
  background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0;
}
.hero2-title .w span { display: inline-block; transition: color .3s ease, -webkit-text-stroke-color .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.hero2-title .w.solid span { color: var(--paper); }
.hero2-title .w.hollow span {
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  transform: skewX(-12deg);
}
/* 마우스를 올린 단어는 회사 색으로 칠해진다 */
.hero2-title .w.is-on,
.hero2-title .w.is-on:nth-of-type(even) { background: none; box-shadow: none; color: inherit; }
.hero2-title .w.solid.is-on span { color: var(--hl); transform: rotate(-2deg) scale(1.03); }
.hero2-title .w.hollow.is-on span { color: var(--hl); -webkit-text-stroke-color: var(--hl); transform: skewX(-12deg) rotate(-2deg) scale(1.03); }
.hero2-title .tail { font-family: var(--display-air); }

.hero2-inner { justify-content: center; padding-bottom: clamp(72px, 9vw, 120px); }
.hero2-pause {
  position: absolute; right: var(--gutter); bottom: clamp(20px, 3vw, 32px); z-index: 2;
  font: inherit; font-size: 13px; font-weight: 800;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid rgba(251, 250, 247, .7); background: rgba(32, 24, 32, .4); color: var(--paper); cursor: pointer;
}
.hero2-pause:hover { background: var(--paper); color: var(--ink); }
.hero2-pause:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@media (max-width: 760px) {
  .hero2-title .w.hollow span { -webkit-text-stroke-width: 1.5px; }
  .hero2-title .w.is-on span, .hero2-title .w.hollow.is-on span { transform: none; }
  .hero2-title .w.hollow.is-on span { transform: skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero2-title .w span { transition: none; }
}

/* =====================================================================
   1-6 (2026-11-11): 버튼 색을 한 단계 밝게 (진한 색과 연한 색 사이 중간 톤)
   ===================================================================== */
:root {
  --c-planning-mid: #FFE563;
  --c-interior-mid: #71F3CA;
  --c-studio-mid:   #CFBCFF;
  --c-fnb-mid:      #FFB3C3;
  --c-holdings-mid: #8DDCFF;
  --hl-mid: var(--c-planning-mid);
}
.pains a { background: var(--hl-mid); }
.tab-row:hover { background: var(--hl-mid); }
.steps .no { background: var(--hl-mid); }
.plan .cost .badge { background: var(--hl-mid); }
.pill-list li { background: var(--hl-mid); }
.sticker { background: var(--c-planning-mid); }
.contact .btn:hover { background: var(--c-planning-mid); }

/* =====================================================================
   1-8 (2026-11-11): 단계 표를 가로 흐름선 배치로 (모양은 1-6 그대로)
   ===================================================================== */
.steps { border-top: 0; gap: 28px; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 28px; right: 0; top: 27px; height: 3px;
  background: var(--ink); z-index: 0;
}
.steps > li, .steps > li + li, .steps > li:nth-child(n), .steps > li:last-child {
  border: 0; padding: 0; position: relative; z-index: 1;
}
.steps .no {
  width: 56px; height: 56px; font-size: var(--s-20);
  box-shadow: 3px 3px 0 var(--ink);
}
.steps h3 { margin-top: 18px; }
.steps p { margin-top: 8px; font-size: 15px; }
.steps ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; color: var(--ink); font-size: 13px; }
.steps ul li {
  border: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink);
  border-radius: 999px; padding: 4px 11px; background: #fff; font-weight: 700;
}
@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
  .steps > li, .steps > li:nth-child(n) { padding-left: 80px; }
  .steps .no { position: absolute; left: 0; top: 0; }
  .steps h3 { margin-top: 12px; }
}
@media (max-width: 560px) {
  .steps > li, .steps > li:nth-child(n) { padding-left: 72px; }
  .steps .no { width: 50px; height: 50px; font-size: var(--s-16); }
  .steps::before { left: 24px; }
}

/* =====================================================================
   2-1 (2026-11-11): 계열사 판에 소개서 PDF 내려받기 링크
   판 전체는 회사 이름 링크가 덮고, 작은 내려받기 링크만 그 위에 올라온다
   ===================================================================== */
.tab-row { position: relative; cursor: pointer; }
.tab-row .stretch { text-decoration: none; color: inherit; }
.tab-row .stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tab-row .stretch:focus-visible { outline: none; }
.tab-row:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
.tab-row .doc {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 4px 0;
  font-size: 13px; font-weight: 700; color: var(--pencil);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.tab-row .doc small {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; line-height: 1.5;
  text-decoration: none;
}
.tab-row .doc:hover { color: var(--ink); text-decoration-thickness: 2px; }
.tab-row .doc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

/* 2-2: 소개서 링크는 구역 제목 아래 하나만 */
.section-head .doc {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  font-size: 14px; font-weight: 700; color: var(--pencil);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.section-head .doc small {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; line-height: 1.5;
}
.section-head .doc:hover { color: var(--ink); text-decoration-thickness: 2px; }

/* =====================================================================
   2-4 (2026-11-12): 고객사 이름 흐름 → 약속 흐름 (약속마다 맡는 팀 표시)
   ===================================================================== */
.promises .clients li,
.promises .clients li:nth-child(odd) {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--s-25), 3vw, var(--s-39));
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0 0.6em;
}
.promises .clients li:nth-child(even) { font-family: var(--display-air); font-weight: 300; }
.promises .clients .who {
  font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: 0;
  color: var(--ink);
  background: var(--hl-mid); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 2px 10px; white-space: nowrap; transform: translateY(-0.2em);
}
.promises .clients li::after { margin-left: 0.8em; }
@media (prefers-reduced-motion: reduce) {
  .promises .clients li { font-size: var(--s-20); }
}
.promises .clients { background: #fff; }
/* 2-5: 흐름 멈춤 버튼 제거, 띠를 누르면 멈춤/재생 */
.clients[role="button"] { cursor: pointer; }
.clients[role="button"]:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }

/* =====================================================================
   2-6 (2026-11-12): 단계 흐름선 각 칸을 가운데 정렬, 선은 첫 원 중심~마지막 원 중심
   (960px 이하 세로 흐름선은 그대로 왼쪽)
   ===================================================================== */
@media (min-width: 961px) {
  .steps { --gap: 28px; gap: var(--gap); }
  .steps > li, .steps > li:nth-child(n) { text-align: center; }
  .steps .no { margin: 0 auto; }
  .steps p { max-width: 22em; margin-left: auto; margin-right: auto; }
  .steps ul { justify-content: center; }
  .steps::before {
    left: calc((100% - 3 * var(--gap)) / 8);
    right: calc((100% - 3 * var(--gap)) / 8);
  }
}
@media (min-width: 961px) { .steps + .note { text-align: center; margin-left: auto; margin-right: auto; margin-top: 32px; } }

/* =====================================================================
   2-7 (2026-11-12): 줄바꿈 다듬기
   가운데 정렬된 짧은 설명은 줄 길이를 고르게(balance),
   나머지 문단은 마지막 줄에 한 단어만 남지 않게(pretty)
   ===================================================================== */
.steps p, .steps h3, .h-section, .contact h2, .co-slogan, .hero2-sub { text-wrap: balance; }
p, li, dd, dt { text-wrap: pretty; }
@media (min-width: 961px) { .steps p { max-width: 19em; } }

/* =====================================================================
   2-8 (2026-11-12): 리뷰 반영
   ===================================================================== */
/* 대장기획 12개월 로드맵: 6칸 두 줄, 앞 6개월과 뒤 6개월을 색으로 나눔 */
.roadmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.roadmap li {
  border: 2px solid var(--ink); border-radius: 20px; padding: 18px 16px 20px;
  background: #fff; box-shadow: 3px 3px 0 var(--ink);
}
.roadmap li:nth-child(-n+6) { background: var(--hl-soft); }
.roadmap .m {
  display: inline-block; font-family: var(--display); font-size: 14px;
  background: var(--hl-mid); border: 1.5px solid var(--ink); border-radius: 999px; padding: 2px 10px;
}
.roadmap li:nth-child(n+7) .m { background: #fff; }
.roadmap h3 { margin-top: 12px; font-family: var(--display); font-size: var(--s-20); line-height: 1.3; text-wrap: balance; }
.roadmap p { margin-top: 6px; font-size: 14px; color: var(--pencil); }
@media (max-width: 1100px) { .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .roadmap li { padding: 14px 12px 16px; } .roadmap h3 { font-size: var(--s-16); } }
/* 팀 페이지 대표 한 명 소개 */
.leader-solo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.leader-solo figure { max-width: 420px; }
.leader-solo h3 { margin-top: 0; }
@media (max-width: 760px) { .leader-solo { grid-template-columns: 1fr; } }
/* BRAND 문구: 가격표 위 한 줄, 퍼스널 브랜딩 첫 문장 */
.compare-head { margin-top: 36px; font-family: var(--display); font-size: clamp(var(--s-20), 2.4vw, var(--s-31)); line-height: 1.3; text-wrap: balance; }
.compare-head + .compare { margin-top: 14px; }
.plan .for .phrase { display: block; font-family: var(--display); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
/* 푸터 링크 누르기 쉬운 높이(24px 이상) */
.site-footer li { padding: 0; }
.site-footer li a, .site-footer li .placeholder { display: inline-block; padding: 4px 0; min-height: 28px; }
.co-hero .btn-row { margin-top: 26px; }