/* 생활해상도 3.2: 이미지는 분위기를 만들고, HTML 문장은 항상 또렷하게 읽힌다. */
:root{
  --hero-friction:#ff8467;
  --hero-choice:#d9ff45;
  --hero-precision:#bdeee2;
  --decision-context:#ffd166;
  --reading-white:#fffdf8;
}

/* 밝은 사진 영역에서도 제목과 설명이 같은 대비를 유지하도록 국소 스크림을 둔다. */
.signal-hero{
  background-color:#244f40;
  background-image:
    linear-gradient(90deg,rgba(7,29,23,.82) 0%,rgba(11,43,34,.62) 40%,rgba(15,46,37,.22) 76%,rgba(15,46,37,.12) 100%),
    url("../images/brand-hero.webp");
  background-position:center;
  background-size:cover;
}
.hero-copy-wrap{position:relative;isolation:isolate}
.hero-copy-wrap::before{
  position:absolute;
  inset:20px -34px 6px -28px;
  z-index:0;
  background:radial-gradient(ellipse at 38% 44%,rgba(5,24,18,.78) 0%,rgba(5,24,18,.55) 48%,rgba(5,24,18,0) 78%);
  content:"";
  pointer-events:none;
}
.hero-copy-wrap>*{position:relative;z-index:1}
.hero-copy-wrap h1{color:var(--reading-white);text-shadow:0 3px 22px rgba(3,15,11,.78)}
.hero-copy-wrap h1 .hero-word{display:inline;color:inherit;font:inherit;font-weight:900;letter-spacing:inherit}
.hero-copy-wrap h1 .hero-word-friction{
  color:var(--hero-friction);
  background:linear-gradient(transparent 82%,rgba(255,132,103,.42) 82%);
}
.hero-copy-wrap h1 .hero-word-choice{
  color:var(--hero-choice);
  background:linear-gradient(transparent 82%,rgba(217,255,69,.34) 82%);
}
.hero-copy-wrap h1 .hero-word-precision{
  color:var(--hero-precision);
  text-decoration-color:var(--hero-choice);
}
.hero-copy{
  max-width:560px;
  color:var(--reading-white);
  font-weight:600;
  text-shadow:0 2px 14px rgba(3,15,11,.9);
  text-wrap:pretty;
}
.hero-stamp span,.hero-index li{color:#f0f4ed}

/* 쓸모 문장은 왼쪽에서 읽고, 이매진 정물은 오른쪽에서만 은은하게 보인다. */
.signal-manifesto{
  position:relative;
  isolation:isolate;
  background-color:#faf8f2;
  background-image:
    linear-gradient(90deg,rgba(250,248,242,.99) 0%,rgba(250,248,242,.97) 55%,rgba(250,248,242,.84) 73%,rgba(250,248,242,.52) 100%),
    url("../images/manifesto-lens-background-v1.webp");
  background-position:center;
  background-size:cover;
}
.manifesto-grid{position:relative;z-index:1}
.manifesto-grid .accent-word{color:#9a280f}
.manifesto-grid .phrase-highlight{
  background:linear-gradient(transparent 64%,rgba(217,255,69,.54) 64%);
}
.manifesto-copy{
  padding:22px 24px 24px;
  border-top:2px solid #9a280f;
  background:rgba(255,253,248,.9);
  box-shadow:0 18px 42px rgba(45,58,50,.08);
}
.manifesto-copy p{color:#26312d;font-weight:520}

/* 여섯 생활 신호는 한 장의 생성 정물 위에 불투명한 정보 카드를 올린다. */
.signal-map{
  position:relative;
  isolation:isolate;
  background-color:#dfe6d8;
  background-image:
    linear-gradient(180deg,rgba(244,241,234,.74),rgba(225,232,216,.84)),
    url("../images/signal-map-background-v2.webp");
  background-position:center;
  background-size:cover;
}
.signal-map::before{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(90deg,rgba(10,16,22,.08) 1px,transparent 1px),
    linear-gradient(rgba(10,16,22,.07) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%,100% 86px;
  content:"";
  pointer-events:none;
}
.signal-map>.shell{position:relative;z-index:1}
.signal-map-head{
  padding:24px 26px;
  border-top:1px solid rgba(10,16,22,.62);
  border-bottom:1px solid rgba(10,16,22,.26);
  background:rgba(250,248,242,.84);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.map-title-accent{color:#9a280f}
.signal-map-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:rgba(250,248,242,.95);
}
.signal-map-card-1{--map-card-image:url("../images/signal-card-home-v1.webp")}
.signal-map-card-2{--map-card-image:url("../images/signal-card-compact-v1.webp")}
.signal-map-card-3{--map-card-image:url("../images/signal-card-travel-v1.webp")}
.signal-map-card-4{--map-card-image:url("../images/signal-card-digital-v1.webp")}
.signal-map-card-5{--map-card-image:url("../images/signal-card-mobility-v1.webp")}
.signal-map-card-6{--map-card-image:url("../images/signal-card-season-v1.webp")}
.signal-map-card::before{z-index:3}
.signal-map-card::after{
  position:absolute;
  top:0;
  right:0;
  z-index:0;
  width:62%;
  height:43%;
  background:var(--map-card-image) center/cover no-repeat;
  clip-path:polygon(25% 0,100% 0,100% 100%,0 76%);
  content:"";
  filter:saturate(.72) contrast(.96);
  opacity:.48;
  pointer-events:none;
}
.signal-map-card>*{position:relative;z-index:2}
.signal-map-card:first-child::after,.signal-map-card:hover::after{filter:saturate(.72) brightness(.68) contrast(1.08);opacity:.5}

/* 질문의 수와 세 가지 판단 초점을 서로 다른 짧은 색 신호로 구분한다. */
.system-intro h2 .decision-count{
  position:relative;
  display:inline-block;
  margin:.08em .1em .06em 0;
  padding:0 .2em .03em;
  color:var(--hero-choice);
  font:inherit;
  font-size:1.09em;
  font-weight:900;
  letter-spacing:inherit;
  white-space:nowrap;
}
.system-intro h2 .decision-count::after{
  position:absolute;
  inset:-.03em -.12em -.01em;
  border:2px solid currentColor;
  border-radius:50%;
  content:"";
  transform:rotate(-4deg);
  pointer-events:none;
}
.system-intro h2 .decision-title-tail{color:var(--reading-white);font:inherit;letter-spacing:inherit}
.decision-chain li:nth-child(1){--question-accent:var(--hero-friction)}
.decision-chain li:nth-child(2){--question-accent:var(--decision-context)}
.decision-chain li:nth-child(3){--question-accent:var(--hero-choice)}
.decision-chain li::before{background:var(--question-accent)}
.decision-chain li>span{color:var(--question-accent)}
.decision-chain .question-key{
  color:var(--question-accent);
  text-decoration-color:currentColor;
  text-decoration-thickness:.07em;
}
.decision-chain .question-key-friction{color:var(--hero-friction)}
.decision-chain .question-key-context{color:var(--decision-context)}
.decision-chain .question-key-now{color:var(--hero-choice)}
.decision-chain h3{color:var(--reading-white)}
.decision-chain p,.system-intro>p:last-child{color:#d5ddd4}
.decision-chain p{font-size:.9rem;line-height:1.72}

/* 엔딩은 신규 이매진 배경을 보이되 텍스트가 놓이는 왼쪽을 충분히 어둡게 유지한다. */
.signal-closing{
  position:relative;
  isolation:isolate;
  background-color:#a63c2b;
  background-image:
    linear-gradient(90deg,rgba(116,29,20,.9) 0%,rgba(137,42,29,.82) 58%,rgba(75,48,32,.42) 100%),
    url("../images/closing-evidence-background-v1.webp");
  background-position:center;
  background-size:cover;
}
.closing-grid{position:relative;z-index:1}
.closing-answer{color:#ffd8c4}
.closing-judgement{color:var(--decision-context)}
.closing-key{color:var(--hero-choice)}
.closing-key::after{background:currentColor}
.closing-button{
  padding-inline:16px;
  background:rgba(8,27,21,.22);
  color:var(--reading-white);
}

/* 푸터는 이미지 없이 가장 높은 대비를 유지해 사이트맵을 빠르게 훑게 한다. */
.site-footer{background:#0b1313;color:var(--reading-white)}
.site-footer .footer-kicker,.site-footer .footer-grid h2,.footer-search-link b,.site-footer .footer-menu a:hover{color:var(--hero-choice)}
.site-footer .footer-brand-column>p,.site-footer .footer-menu a{color:#e6ebe6}
.site-footer .footer-brand small,.site-footer .footer-bottom{color:#bfc9c2}

@media(max-width:860px){
  .signal-hero{
    background-image:
      linear-gradient(90deg,rgba(7,29,23,.84),rgba(11,43,34,.46)),
      url("../images/brand-hero.webp");
    background-position:58% center;
  }
  .hero-copy-wrap::before{inset:-12px -24px -2px}
  .signal-manifesto{
    background-image:
      linear-gradient(90deg,rgba(250,248,242,.98),rgba(250,248,242,.84)),
      url("../images/manifesto-lens-background-v1.webp");
    background-position:68% center;
  }
  .manifesto-copy{max-width:660px}
  .signal-map-head{align-items:flex-start}
  .signal-closing{background-position:62% center}
}

@media(max-width:560px){
  .signal-hero{
    background-image:
      linear-gradient(90deg,rgba(5,24,18,.88),rgba(11,43,34,.57)),
      url("../images/brand-hero.webp");
    background-position:61% center;
  }
  .hero-copy-wrap::before{inset:-14px -16px -4px;background:rgba(5,24,18,.26)}
  .hero-copy{font-size:1rem;line-height:1.72}
  .signal-manifesto{
    background-image:
      linear-gradient(rgba(250,248,242,.93),rgba(250,248,242,.91)),
      url("../images/manifesto-lens-background-v1.webp");
    background-position:72% center;
  }
  .manifesto-copy{padding:18px 18px 20px}
  .signal-map{background-position:42% center}
  .signal-map-head{padding:20px 18px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .signal-map-card::after{width:56%;height:38%;opacity:.52}
  .system-intro h2 .decision-count{font-size:1.06em}
  .signal-closing{
    background-image:
      linear-gradient(90deg,rgba(116,29,20,.94),rgba(116,29,20,.7)),
      url("../images/closing-evidence-background-v1.webp");
    background-position:70% center;
  }
  .site-footer .footer-mast h2{text-shadow:none;-webkit-font-smoothing:antialiased}
  /* Windows Chromium 캡처의 LCD 색 번짐을 막고 중립 회색 안티앨리어싱으로 고정한다. */
  .signal-system .system-intro h2,
  .signal-system .system-intro>p,
  .signal-system .decision-chain>li>span,
  .signal-system .decision-chain h3,
  .signal-system .decision-chain p,
  .signal-closing .closing-grid>p,
  .signal-closing .closing-grid h2,
  .signal-closing .closing-button,
  .site-footer .footer-kicker,
  .site-footer .footer-mast h2,
  .site-footer .footer-search-link,
  .site-footer .footer-brand b,
  .site-footer .footer-brand small,
  .site-footer .footer-brand-column>p,
  .site-footer .footer-grid h2,
  .site-footer .footer-menu a,
  .site-footer .footer-bottom span{
    opacity:.999;
    text-shadow:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .signal-map-card{backdrop-filter:none;-webkit-backdrop-filter:none}
}