/* D:AAL R22 shared visual system
   Extends the approved hero language without changing its composition. */
:root {
  --r22-red: #b92e00;
  --r22-white: #ffffff;
  --r22-ink: #15110f;
  --r22-lime: #d9ff43;
  --r22-line: rgba(21, 17, 15, 0.22);
  --r22-line-on-red: rgba(255, 255, 255, 0.42);
  --r22-muted: rgba(21, 17, 15, 0.64);
  --r22-muted-on-red: rgba(255, 255, 255, 0.74);
  --r22-rail: clamp(16px, 3.33vw, 48px);
  --r22-max: 1440px;
  --r22-page: min(100%, 1920px);
  --r22-side: clamp(18px, 3.9vw, 56px);
}

html { background: var(--r22-white); color: var(--r22-ink); }
body {
  background: var(--r22-white) !important;
  color: var(--r22-ink) !important;
  font-family: "Helvetica Neue", Helvetica, Pretendard, Arial, sans-serif !important;
}

::selection { background: var(--r22-lime); color: var(--r22-ink); }
:focus-visible { outline: 2px solid var(--r22-lime) !important; outline-offset: 3px; }

.container,
.site-shell,
.daal-shell,
.guide-wrap {
  width: min(100%, var(--r22-max)) !important;
  max-width: var(--r22-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--r22-rail) !important;
}

/* Header: exact continuation of the approved white hero cap. */
.site-header,
header.header,
.header {
  background: var(--r22-white) !important;
  color: var(--r22-ink) !important;
  border-bottom: 1px solid var(--r22-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-header a,
.header a,
.nav-link,
.brand { color: var(--r22-ink) !important; }

.header-cta,
.nav-cta,
.btn-primary,
.daal-button-primary,
button[type="submit"] {
  background: var(--r22-lime) !important;
  border: 1px solid var(--r22-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--r22-ink) !important;
}

/* Public header contract — identical to the R27 app and privacy page. */
.contact-page .page-header {
  position: relative;
  z-index: 50;
  display: flex;
  width: var(--r22-page);
  height: 59px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--r22-line);
  background: var(--r22-white);
  color: var(--r22-ink);
}

.contact-page .page-wordmark {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding-inline: var(--r22-side);
  color: var(--r22-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.contact-page .page-header nav {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 24px;
}

.contact-page .page-header nav > a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--r22-ink);
  font-size: 16px;
  font-weight: 400;
}

.contact-page .page-header nav > a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.contact-page .page-header nav > a:hover::after,
.contact-page .page-header nav > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.contact-page .page-header .nav-contact {
  height: 100%;
  min-height: 59px;
  padding: 0 20px;
  border: 0 !important;
  background: var(--r22-lime) !important;
  color: var(--r22-ink) !important;
  font-weight: 600;
}

.contact-page .page-menu { display: none; }
.contact-page .inner-page { padding-top: 0; }

.menu-button,
.btn,
.daal-button,
.portfolio-stage-button,
.filter-btn,
.guide-actions a,
.guide-actions button {
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .contact-page .page-header { padding-inline: 16px; }
  .contact-page .page-wordmark { padding: 0; font-size: 20px; }
  .contact-page .page-menu {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .contact-page .page-menu i,
  .contact-page .page-menu i::before,
  .contact-page .page-menu i::after { display: block; width: 22px; height: 1px; background: var(--r22-ink); }
  .contact-page .page-menu i { position: relative; }
  .contact-page .page-menu i::before,
  .contact-page .page-menu i::after { content: ""; position: absolute; left: 0; }
  .contact-page .page-menu i::before { top: -6px; }
  .contact-page .page-menu i::after { top: 6px; }
  .contact-page .page-header nav {
    position: absolute;
    top: 59px;
    right: 0;
    left: 0;
    display: none;
    height: auto;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--r22-line);
    background: var(--r22-white);
  }
  .contact-page .page-header nav.is-open { display: grid; }
  .contact-page .page-header nav > a { min-height: 52px; border-bottom: 1px solid var(--r22-line); }
  .contact-page .page-header nav > a::after { display: none !important; }
  .contact-page .page-header .nav-contact {
    min-height: 52px;
    height: auto;
    justify-content: center;
    border: 1px solid var(--r22-ink) !important;
  }
}

/* Interior heroes use the approved red field, not a second hero concept. */
.page-hero,
.inner-hero,
.insights-hero,
.article-hero,
.portfolio-stage {
  position: relative;
  overflow: hidden;
  background: var(--r22-red) !important;
  background-image: none !important;
  color: var(--r22-white) !important;
  border-bottom: 1px solid var(--r22-line-on-red) !important;
}

body.interior-page .page-hero,
body.privacy-page .page-hero,
body.portfolio-page .page-hero,
body .inner-hero,
body .insights-hero,
body .article-hero,
body .portfolio-stage {
  background: var(--r22-red) !important;
  background-image: none !important;
  color: var(--r22-white) !important;
}

body.interior-page .page-hero *,
body.privacy-page .page-hero *,
body.portfolio-page .page-hero *,
body .inner-hero *,
body .insights-hero *,
body .article-hero *,
body .portfolio-stage * { color: var(--r22-white) !important; }

body.interior-page .page-hero .section-label,
body.privacy-page .page-hero .section-label,
body.portfolio-page .page-hero .section-label,
body .inner-hero .eyebrow,
body .insights-kicker,
body .article-hero .insights-meta,
body .portfolio-stage-kicker { color: var(--r22-lime) !important; }

.page-hero::before,
.inner-hero::before,
.insights-hero::before,
.article-hero::before,
.portfolio-stage::before,
.page-section::before,
.section::before,
.guide-section::before,
.daal-privacy-section::before,
.insights-feature::before,
.insights-scope::before,
.article-cover::before,
.article-layout::before {
  content: "";
  position: absolute;
  inset: 0 var(--r22-rail);
  pointer-events: none;
  border-inline: 1px solid currentColor;
  opacity: 0.22;
  z-index: 0;
}

.page-hero > *, .inner-hero > *, .insights-hero > *, .article-hero > *,
.portfolio-stage > *, .page-section > *, .section > *, .guide-section > *,
.daal-privacy-section > *, .insights-feature > *, .insights-scope > *,
.article-cover > *, .article-layout > * { position: relative; z-index: 1; }

.page-hero .section-label,
.inner-hero .eyebrow,
.insights-kicker,
.article-hero .insights-meta,
.portfolio-stage-kicker { color: var(--r22-lime) !important; }

.page-hero-title,
.inner-title,
.insights-hero h1,
.article-hero h1,
.portfolio-stage h1,
.portfolio-stage-copy {
  max-width: 11ch;
  margin: 0;
  color: var(--r22-white) !important;
  font-size: clamp(3rem, 7vw, 7.4rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.9 !important;
  text-wrap: balance;
}

.inner-title {
  max-width: none;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  word-break: keep-all;
}

.inner-desc {
  max-width: 48ch;
  line-height: 1.65;
  word-break: keep-all;
}

.page-hero-desc,
.inner-desc,
.article-deck,
.portfolio-stage-foot { color: var(--r22-muted-on-red) !important; }

/* Content rhythm: white editorial fields, structural dividers, no card soup. */
.page-section,
.section,
.guide-section,
.daal-privacy-section,
.insights-feature,
.insights-scope,
.article-cover,
.article-layout {
  position: relative;
  background: var(--r22-white) !important;
  color: var(--r22-ink) !important;
  border-bottom: 1px solid var(--r22-line) !important;
}

.section-bg { background: var(--r22-red) !important; color: var(--r22-white) !important; }
.section-bg::before { color: var(--r22-white); opacity: 0.26; }

h1, h2, h3, h4,
.service-name,
.process-item-title,
.package-price,
.cta-title,
.guide-section-head,
.article-body h2 {
  color: inherit;
  font-family: inherit !important;
  letter-spacing: -0.045em !important;
}

.section-label,
.eyebrow,
.service-status,
.package-label,
.insights-meta,
.guide-kicker,
.portfolio-stage-kicker {
  font-family: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.services-grid,
.package-grid,
.contact-layout,
.insights-feature-grid,
.portfolio-grid { gap: 0 !important; }

.service-card,
.package-card,
.contact-aside,
.contact-form-panel,
.guide-card,
.insights-feature-image,
.insights-feature-copy,
.portfolio-card,
.article-note,
.article-brief,
.article-cta {
  background: var(--r22-white) !important;
  color: var(--r22-ink) !important;
  border: 1px solid var(--r22-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.contact-aside {
  padding: clamp(24px, 3vw, 40px);
}

.benefit-card,
.feature-card,
.process-card,
.topic-card,
.article-card,
.pricing-card {
  border: 1px solid var(--r22-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.section-bg .container > div[style*="display:grid"] > div {
  background: var(--r22-white) !important;
  border: 1px solid var(--r22-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.service-card + .service-card,
.package-card + .package-card { border-left: 0 !important; }

.service-card:hover,
.package-card:hover,
.portfolio-card:hover { transform: none !important; border-color: var(--r22-ink) !important; }

.service-status.active,
.package-card.is-recommended .package-label,
.filter-btn.active,
.process-item-num { color: var(--r22-red) !important; }

.service-icon,
.process-tag,
.package-card li::before,
.guide-note { color: var(--r22-red) !important; }

.btn-outline-gold,
.btn-secondary,
.article-inline-link,
.insights-read-link,
.article-back {
  background: transparent !important;
  border-color: currentColor !important;
  color: inherit !important;
}

.btn:hover,
.daal-button:hover,
.header-cta:hover,
.nav-cta:hover,
button[type="submit"]:hover {
  background: var(--r22-ink) !important;
  color: var(--r22-white) !important;
}

.filter-btn.active { background: var(--r22-lime) !important; border-color: var(--r22-ink) !important; color: var(--r22-ink) !important; }

.process-item,
.guide-section-head,
.portfolio-archive-head,
.article-body > section,
.daal-privacy-article,
.contact-facts > * { border-color: var(--r22-line) !important; }

@media (min-width: 900px) {
  .inner-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
    gap: clamp(48px, 7vw, 112px);
  }
}

@media (max-width: 899px) {
  .inner-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .inner-desc { max-width: 42ch; }
}

.process-item-line,
.article-sequence::before { background: var(--r22-line) !important; }

.guide-table,
.daal-privacy-table,
table { border-color: var(--r22-line) !important; }

th { background: var(--r22-ink) !important; color: var(--r22-white) !important; }
td, th { border-color: var(--r22-line) !important; }

input, textarea, select {
  background: var(--r22-white) !important;
  border: 1px solid var(--r22-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--r22-ink) !important;
}

input:focus, textarea:focus, select:focus { border-color: var(--r22-ink) !important; outline: 2px solid var(--r22-lime) !important; }

.portfolio-stage-action,
.portfolio-stage-button { color: var(--r22-white) !important; border-color: var(--r22-line-on-red) !important; }
.portfolio-stage-button:hover { background: var(--r22-lime) !important; color: var(--r22-ink) !important; }

.cta-block {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
}

.scope-note {
  background: var(--r22-white) !important;
  color: var(--r22-ink) !important;
  border: 1px solid var(--r22-line) !important;
  border-radius: 0 !important;
}

.site-footer,
footer.footer,
.footer,
.compact-footer {
  background: var(--r22-red) !important;
  color: var(--r22-white) !important;
  border-top: 1px solid var(--r22-line-on-red) !important;
}

.site-footer a,
.footer a,
.compact-footer a { color: var(--r22-white) !important; }

.kakao-float { filter: none !important; }
.kakao-btn { background: var(--r22-lime) !important; color: var(--r22-ink) !important; border: 1px solid var(--r22-ink) !important; box-shadow: none !important; }

@media (max-width: 767px) {
  :root { --r22-rail: 15px; }
  .page-hero-title,
  .inner-title,
  .insights-hero h1,
  .article-hero h1,
  .portfolio-stage h1,
  .portfolio-stage-copy { font-size: clamp(2.7rem, 14vw, 4.8rem) !important; line-height: 0.92 !important; }
  .inner-title { font-size: clamp(2.875rem, 12vw, 3.25rem) !important; line-height: 1.04 !important; }
  .service-card + .service-card,
  .package-card + .package-card { border-left: 1px solid var(--r22-line) !important; border-top: 0 !important; }
  .mobile-menu { background: var(--r22-white) !important; color: var(--r22-ink) !important; border-color: var(--r22-line) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}