/* 한국유통 v13 — 현장 서비스 간판에서 가져온 시각 언어 */
:root {
  --workwear: #0a1c33;
  --workwear-soft: #122943;
  --steel: #e7edf1;
  --signal: #ffb029;
  --service-blue: #2f65ee;
}

.home-page .site-header {
  max-width: none;
  padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  padding-right: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: var(--white);
}

.home-page .brand b { color: #9daabd; }
.home-page .brand-mark { background: var(--signal); color: #101820; }
.home-page .nav-store { color: #ffcb68; }
.home-page .nav-cta { border-bottom-color: var(--signal); }
.home-page nav { color: var(--workwear); }
.home-page .nav-store { color: #1748c7; }
.home-page .nav-cta { border-bottom-color: var(--service-blue); }

.home-hero {
  position: relative;
  min-height: min(860px, 100svh);
  display: grid;
  grid-template-columns: minmax(470px, .96fr) minmax(520px, 1.04fr);
  overflow: hidden;
  isolation: isolate;
  background: var(--workwear);
  color: var(--white);
}

.home-hero::before {
  content: "KR";
  position: absolute;
  z-index: 0;
  left: max(26px, calc((100vw - var(--max)) / 2 + 26px));
  bottom: -4.5vw;
  color: transparent;
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(180px, 24vw, 360px);
  line-height: .76;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  pointer-events: none;
}

.home-intro {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 148px 48px 92px max(32px, calc((100vw - var(--max)) / 2 + 32px));
  animation: copy-in .7s cubic-bezier(.2,.8,.2,1) both;
}

.home-business-name {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  color: #d9e2ef;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.home-business-name span {
  display: inline-block;
  margin-left: 0;
  padding: 8px 10px 7px;
  background: var(--signal);
  color: #101820;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.home-intro h1 {
  max-width: 690px;
  margin-bottom: 28px;
  color: var(--white);
  font-size: clamp(48px, 4.6vw, 74px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.home-intro h1 em {
  color: #ffbf45;
  font-style: normal;
  font-weight: 800;
}

.home-intro-copy {
  max-width: 540px;
  margin-bottom: 36px;
  color: #b9c5d5;
  font-size: 17px;
  line-height: 1.78;
}

.home-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-page .home-actions .button { min-height: 58px; padding: 0 25px; }
.home-page .button-call { background: var(--service-blue); }
.home-page .button-call:hover { background: #1748c7; }
.home-button-outline { border-color: rgba(255,255,255,.4); background: transparent; color: var(--white); }
.home-button-outline:hover { border-color: var(--white); background: var(--white); color: var(--workwear); }

.home-photo-note {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
  max-width: 540px;
  margin: 52px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: #9eacbf;
  font-size: 13px;
  line-height: 1.7;
}

.home-photo-note span { color: var(--signal); font-weight: 800; }
.home-photo-note p { margin: 0; }
.home-photo-note b { margin-right: 8px; color: var(--white); }

.home-machine-photo {
  position: relative;
  z-index: 1;
  min-height: min(860px, 100svh);
  margin: 0;
  overflow: hidden;
  background: var(--steel);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

.home-machine-photo::before {
  content: "COFFEE / VENDING";
  position: absolute;
  z-index: 1;
  top: 116px;
  right: 5%;
  color: #9ea9b2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.home-machine-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 16%;
  right: 8%;
  bottom: 46px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15,31,47,.23);
  filter: blur(22px);
  pointer-events: none;
}

.home-machine-photo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 92px 2% 22px 6%;
  object-fit: contain;
  object-position: center bottom;
  filter: contrast(1.04) saturate(.92);
  animation: machine-in .9s .08s cubic-bezier(.2,.8,.2,1) backwards;
}

.home-photo-tag {
  position: absolute;
  z-index: 4;
  top: 118px;
  left: 14%;
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--service-blue);
  color: #66727d;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .12em;
}

.home-photo-tag b {
  color: #15283b;
  font-size: 14px;
  letter-spacing: -.01em;
}

.home-machine-photo figcaption {
  position: absolute;
  z-index: 5;
  left: 6%;
  bottom: 38px;
  display: grid;
  gap: 5px;
  min-width: 330px;
  padding: 21px 26px 23px;
  border-top: 0;
  background: var(--service-blue);
  color: var(--white);
  box-shadow: 0 24px 54px rgba(19,43,72,.2);
  animation: plate-in .7s .48s cubic-bezier(.2,.8,.2,1) backwards;
}

.home-machine-photo figcaption span { color: #dce6ff; font-size: 11px; }
.home-machine-photo figcaption a { color: var(--white); font-size: 27px; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.home-machine-photo figcaption small { color: #c3d3ff; font-size: 10px; }

/* 첫 화면 아래도 같은 색과 간격을 유지한다. */
.signal-strip {
  background: var(--signal);
  color: var(--workwear);
}

.signal-strip p { min-height: 88px; }
.signal-strip b { font-size: 18px; }
.signal-strip span { color: #394452; }
.signal-strip a { border-bottom-color: var(--workwear); color: var(--workwear); }

.service-proof {
  position: relative;
  max-width: var(--max);
  margin: 104px auto 0;
  padding: 82px;
  overflow: hidden;
  background: var(--workwear);
  color: var(--white);
}

.service-proof::before {
  content: "SERVICE / 01";
  position: absolute;
  top: 30px;
  right: 34px;
  color: #5f7186;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.service-proof-heading > p:last-of-type { color: #aebccd; }
.service-proof .text-link { border-bottom-color: rgba(255,255,255,.65); color: var(--white); }
.service-proof .text-link span { color: var(--signal); }
.service-proof-gallery figcaption { border-top-color: rgba(255,255,255,.55); }
.service-proof-gallery figcaption span { color: var(--signal); }

.featured-products { padding-top: 126px; }
.featured-products-heading { padding-bottom: 32px; border-bottom: 1px solid #aeb5bb; }
.featured-product { background: #e8edf0; }
.featured-product small { color: #1748c7; }

.guide-index {
  max-width: none;
  padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  padding-right: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  background: #dfe7ec;
}

.guide-links a::after { color: #1748c7; }
.guide-links a:hover { color: #1748c7; }

.intake-section {
  margin-top: 92px;
  margin-bottom: 92px;
  padding-top: 0;
  padding-bottom: 0;
}

.intake-form {
  padding: 42px 44px 46px;
  border-top: 4px solid var(--service-blue);
  background: #fff;
  box-shadow: 0 28px 70px rgba(25,42,58,.1);
}

.criteria-section { background: var(--workwear); }
.criteria-card.positive::after { background: var(--signal); }
.criteria-card.conditional::after { background: #7697bf; }
.card-no { color: #8291a3; }

.photo-guide { background: #dfe7ec; }
.photo-slots { background: var(--workwear-soft); }
.photo-slots span { color: var(--signal); }

.qna-section {
  max-width: none;
  padding-left: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  padding-right: max(32px, calc((100vw - var(--max)) / 2 + 32px));
  background: #dce6ee;
}

.qna-workspace-head { border-bottom-color: #17283b; }
.store-wordmark { border-top-color: #17283b; }

.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--service-blue);
}

.final-cta::after {
  content: "CALL";
  position: absolute;
  right: -22px;
  bottom: -55px;
  color: transparent;
  font-family: "Black Han Sans", sans-serif;
  font-size: clamp(120px, 17vw, 250px);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  pointer-events: none;
}

.final-cta > * { position: relative; z-index: 1; }
.final-cta .eyebrow { color: #ffe0a3; }

footer { background: #071526; }

/* 검색 유입용 안내 페이지도 홈과 같은 브랜드 톤을 쓴다. */
.guide-header,
.guide-hero,
.product-hero { background: var(--workwear); }

.guide-header .brand-mark { background: var(--signal); color: #101820; }
.guide-hero-copy h1 em,
.product-hero-copy h1 em { color: #ffbf45; }
.guide-visual { background: var(--steel); }
.guide-visual figcaption { border-left-color: var(--signal); }
.guide-aside { background: var(--service-blue); }
.guide-aside .eyebrow { color: #ffe0a3; }
.notice-box { border-left-color: var(--signal); }
.related-guides a:hover { background: var(--service-blue); }
.product-contact { background: var(--service-blue); }

.fulfillment-strip {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  max-width: var(--max);
  margin: 88px auto 0;
  border-top: 2px solid var(--workwear);
  border-left: 1px solid rgba(10,28,51,.2);
}

.fulfillment-strip > div {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  padding: 27px 25px;
  border-right: 1px solid rgba(10,28,51,.2);
  border-bottom: 1px solid rgba(10,28,51,.2);
  background: #f5f7f8;
}

.fulfillment-strip .fulfillment-heading {
  justify-content: space-between;
  background: var(--workwear);
  color: var(--white);
}

.fulfillment-heading span,
.fulfillment-strip > div > span {
  color: var(--signal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.fulfillment-heading strong {
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -.03em;
}

.fulfillment-strip > div > b {
  margin-top: auto;
  font-size: 18px;
}

.fulfillment-strip > div > p {
  margin: 10px 0 0;
  color: #5b646b;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .home-page .site-header { padding: 0 24px; }
  .home-page nav { color: var(--white); }
  .home-page .nav-cta { border-bottom-color: var(--signal); }
  .home-hero { min-height: 760px; grid-template-columns: 1.06fr .94fr; }
  .home-intro { padding: 126px 24px 68px; }
  .home-intro h1 { font-size: clamp(43px, 6.5vw, 60px); }
  .home-business-name { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 36px; }
  .home-intro-copy { font-size: 15px; }
  .home-photo-note { margin-top: 38px; }
  .home-machine-photo { min-height: 760px; }
  .home-machine-photo img { padding: 110px 0 14px 1%; object-position: 44% bottom; }
  .home-photo-tag { left: 18%; }
  .home-machine-photo figcaption { left: 4%; min-width: 280px; }
  .service-proof { width: calc(100% - 48px); padding: 68px 48px; }
  .fulfillment-strip { grid-template-columns: repeat(2, 1fr); margin-left: 24px; margin-right: 24px; }
}

@media (max-width: 640px) {
  .home-page .site-header { padding: 0 18px; background: rgba(10,28,51,.86); backdrop-filter: blur(12px); }
  .home-hero { min-height: 930px; display: block; }
  .home-hero::before { bottom: 42%; font-size: 190px; }
  .home-intro { min-height: 0; padding: 104px 22px 20px; }
  .home-business-name { align-items: center; flex-direction: row; gap: 10px; margin-bottom: 25px; font-size: 12px; }
  .home-business-name span { padding: 7px 8px 6px; font-size: 9px; }
  .home-intro h1 { max-width: 500px; margin-bottom: 22px; font-size: 37px; }
  .home-intro-copy { display: none; }
  .home-actions { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; }
  .home-actions .button { width: 100%; }
  .home-photo-note { display: none; }
  .home-machine-photo { position: absolute; left: 0; right: 0; top: 330px; bottom: 0; height: 600px; min-height: 0; clip-path: none; }
  .home-machine-photo::before { top: 30px; }
  .home-machine-photo img { padding: 34px 0 0; object-position: 70% bottom; }
  .home-photo-tag { top: 30px; left: 20px; }
  .home-machine-photo figcaption { left: 0; bottom: 0; min-width: 270px; padding: 15px 20px 17px; }
  .home-machine-photo figcaption a { font-size: 22px; }
  .signal-strip p { padding: 22px 0; }
  .service-proof { width: calc(100% - 24px); margin-top: 54px; padding: 64px 22px 48px; }
  .service-proof::before { top: 22px; right: 22px; }
  .guide-index { padding-left: 22px; padding-right: 22px; }
  .intake-section { margin-top: 72px; margin-bottom: 72px; }
  .intake-form { padding: 30px 22px; }
  .qna-section { padding-left: 22px; padding-right: 22px; }
  .fulfillment-strip { grid-template-columns: 1fr; margin: 58px 22px 0; }
  .fulfillment-strip > div { min-height: 150px; }
  .fulfillment-strip .fulfillment-heading { min-height: 180px; }
}

@media (max-width: 380px) {
  .home-hero { min-height: 950px; }
  .home-intro h1 { font-size: 35px; }
  .home-machine-photo { top: 360px; height: 590px; }
}