/* The homepage uses one design system. Earlier iterations remain archived. */
@import url("./refined.css");

/* Official mark and outlined wordmark rendered as inline SVG. */
.brand {
  --brand-visible-width: clamp(154px, 13vw, 184px);
  flex: 0 0 var(--brand-visible-width);
  width: var(--brand-visible-width);
  aspect-ratio: 263 / 89;
}
.brand .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  fill: none;
  stroke: none;
}

.footer-brand {
  --brand-visible-width: clamp(178px, 16vw, 216px);
}

.contact-links {
  display: grid;
  width: min(100%, 340px);
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

.contact-side .contact-links a {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  min-height: 54px;
  padding: 15px 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  max-width: none;
}

.contact-links span {
  font-size: 11px;
  color: rgba(255, 255, 255, .64);
}

.contact-links strong {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
}

.contact-links a:focus-visible,
.company-info a:focus-visible {
  outline: 3px solid var(--salmon);
  outline-offset: 4px;
}

.company-info a {
  width: fit-content;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(36, 82, 122, .28);
  text-underline-offset: 4px;
}

.company-info {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  font-size: 13px;
}

.footer-bottom {
  grid-template-columns: 1fr auto;
}

/* Product focus and resilient mid-width layouts. */
.row-product-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  background-image: none !important;
}

.business-row[data-business="church"] {
  min-height: 380px;
}

.business-row[data-business="church"] .business-title > span::before {
  content: "운영 중 · ";
  color: #f1d6ad;
}

@media (max-width: 960px) {
  .business-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .business-row[data-business="church"] {
    grid-column: 1 / -1;
    min-height: 380px;
  }

  .business-row[data-business="church"] .business-desc {
    max-width: 440px;
  }
}

@media (max-width: 800px) {
  .hero-copy {
    min-height: 0;
  }

  .hero-stage,
  .scene-backdrop {
    height: 330px;
  }
}

@media (max-width: 640px) {
  .brand { --brand-visible-width: 138px; }
  .footer-brand { --brand-visible-width: 178px; }
  .contact-links { width: 100%; }
  .contact-side .contact-links a { grid-template-columns: 52px minmax(0, 1fr); }

  .business-list {
    grid-template-columns: 1fr;
  }

  .business-row[data-business="church"] {
    grid-column: auto;
    min-height: 320px;
  }
}

@media (max-width: 540px) {
  .hero-copy {
    padding-block: 24px;
  }

  .hero h1 {
    margin-block: 16px;
    font-size: clamp(31px, 9vw, 34px);
  }

  .hero-stage,
  .scene-backdrop {
    height: 250px;
  }

  .scene-backdrop {
    bottom: 112px;
  }

  .panel-float {
    top: 12%;
    height: 66%;
  }

  .phone-float {
    top: 22%;
  }

  .scene-tabs {
    height: 96px;
    margin-top: 12px;
  }

  .business-section,
  .manifesto,
  .approach-section {
    padding-block: 56px;
  }
}
/* Unreleased math services keep their place without claiming a finished UI. */
.pending-screen{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center;background:#f4f3ed;color:#24527a}
.pending-screen small{font-size:8px;letter-spacing:.12em}.pending-screen h4{font-size:18px}.pending-screen p{font-size:9px;line-height:1.6}
.phone-screen .pending-screen h4{font-size:13px}
.business-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.business-row[data-business="church"]{min-height:400px}
.church-preview-phone{position:absolute;z-index:2;right:5%;top:16%;width:29%;aspect-ratio:390/820;transform:rotate(7deg);border:5px solid #243338;border-radius:20px;overflow:hidden;box-shadow:0 16px 35px #0005;background:#faf9f5}
.church-preview-phone img{width:100%;height:100%;object-fit:cover}
.business-row[data-business="church"] .business-desc{max-width:62%}
.business-row[data-business^="math-"] .row-product-bg{opacity:.2}
.business-row[data-business^="math-"]{background:#374e57}
@media(max-width:960px){.business-row[data-business="church"]{grid-column:auto}.church-preview-phone{right:3%;width:34%}}
@media(max-width:640px){.business-list{grid-template-columns:1fr}.business-row[data-business="church"]{min-height:350px}.church-preview-phone{width:30%}}
/* Each church scene mount starts at the home and settles on the sermon thumbnail. */
.church-scroll-preview{overflow:hidden;container-type:inline-size}
.church-scroll-preview img{display:block;width:100%;height:auto;max-width:none;object-fit:initial;transform:translateY(0);animation:church-preview-scroll 2.8s cubic-bezier(.25,.1,.25,1) 1.1s forwards}
.church-scroll-preview>span{z-index:1;bottom:5px;right:5px;left:5px;text-align:center}
@keyframes church-preview-scroll{from{transform:translateY(0)}to{transform:translateY(-26.7%)}}
@media(prefers-reduced-motion:reduce){.church-scroll-preview img{animation:none;transform:translateY(-26.7%)}}


/* Shared 80-second palette cycle: navy/coral → teal/gold → plum/rose → clay/sage. */
@property --brand-primary { syntax: '<color>'; inherits: true; initial-value: #24527a; }
@property --brand-secondary { syntax: '<color>'; inherits: true; initial-value: #f06b5a; }
:root {
  --brand-primary: #24527a;
  --brand-secondary: #f06b5a;
  animation: brand-palette 80s ease-in-out infinite;
}
@keyframes brand-palette {
  0%, 10%, 100% { --brand-primary: #24527a; --brand-secondary: #f06b5a; }
  25%, 35% { --brand-primary: #21645d; --brand-secondary: #d6a34a; }
  50%, 60% { --brand-primary: #65436e; --brand-secondary: #d99a98; }
  75%, 85% { --brand-primary: #874831; --brand-secondary: #a0b49a; }
}
.brand-logo path[fill="#24527A"] { fill: var(--brand-primary); }
.brand-logo rect[fill="#F06B5A"] { fill: var(--brand-secondary); }
h2 em, .hero-actions .action-secondary, .desktop-nav a:hover,
.scene-tabs button[aria-selected=true] b, .scene-tabs button[aria-selected=true]>span {
  color: var(--brand-primary);
}
.hero-actions .action-primary, .header-contact, .detail-return,
.hero-actions .action-primary:hover, .header-contact:hover, .detail-return:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.hero-actions .action-primary i, .header-contact i { color: #fff; }
.eyebrow i { background: var(--brand-primary); }
.section-label:not(.light)>span, .eyebrow>span:first-child { color: var(--brand-primary); }
@media(prefers-reduced-motion:reduce) {
  :root { animation: none; --brand-primary: #24527a; --brand-secondary: #f06b5a; }
}
/* Avoid a second transition delay on colors driven by the shared timeline. */
.hero-actions .action-primary, .header-contact, .detail-return {
  transition-property: box-shadow, transform;
}
/* Capture of the public church service website; keep the entire desktop viewport visible. */
.church-website-preview{width:100%;height:100%;background:#f6f8f5}
.church-website-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
/* Slightly squarer phone and a consistent, wider browser silhouette. */
.phone-device{border-radius:20px}
.phone-screen{border-radius:14px}
.church-preview-phone{border-radius:14px}
.panel-float{height:auto;aspect-ratio:1.85 / 1;top:18%;right:4%}
@media(max-width:540px){
  .phone-device{border-radius:14px}
  .phone-screen{border-radius:10px}
}

/* Rebalance the taller browser panel and give its chrome a slightly clearer gray. */
.browser-bar{background:#dce1df;color:#65716b;border-bottom:1px solid #cbd1ce;border-radius:8px 8px 0 0}
.browser-bar i{background:#a7afac}
@media(max-width:1100px){.panel-float{top:24%;right:3%}}
@media(max-width:800px){.panel-float{top:14%;right:5%}}
@media(max-width:540px){.panel-float{top:16%;right:2%}}
/* The shell stays opaque; the incoming page blends over the previous page. */
.phone-screen,.desktop-screen{position:relative;isolation:isolate}
.device-screen-layer{position:absolute;inset:0;width:100%;height:100%;background:#fafbf8;overflow:hidden}

/* Start at the PWA home, then slowly reveal the study folders and toolbox. */
.math-pwa-preview{container-type:size;overflow:hidden}
.math-pwa-preview .math-pwa-content{display:block;width:100%;height:auto;max-width:none;object-fit:initial;transform:translateY(0);animation:math-preview-scroll 5s cubic-bezier(.25,.1,.25,1) 1.1s forwards}

@keyframes math-preview-scroll{from{transform:translateY(0)}to{transform:translateY(min(0px,calc(100cqh - 100%)))}}
@media(prefers-reduced-motion:reduce){.math-pwa-preview .math-pwa-content{animation:none;transform:translateY(min(0px,calc(100cqh - 100%)))}}

.math-pwa-preview .math-pwa-navigation{position:absolute;left:0;bottom:0;z-index:2;display:block;width:100%;height:auto;max-width:none;object-fit:initial;transform:none;animation:none}

/* The company site is a gateway. Card selection and judging live only in /study/. */
.study-gateway-phone{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 11px 12px;background:#f5f7f4;color:#263946;text-align:center}
.study-gateway-phone>span{font:500 6px var(--mono);letter-spacing:.1em;color:#627e8f}
.study-gateway-icon{display:block;width:72px;height:72px;margin:11px 0 3px;border-radius:18px;object-fit:cover;box-shadow:0 9px 22px #24485c3d}
.study-gateway-phone strong{font-size:12px;line-height:1.35}.study-gateway-phone p{font-size:7px;color:#617480}.study-gateway-pill{margin-top:13px;padding:7px 9px;border-radius:30px;background:#e2ebec;color:#275371;font-size:7px;font-weight:700}
.study-gateway-desktop{height:100%;display:flex;flex-direction:column;padding:5% 6%;background:#f5f7f4;color:#263946}
.study-gateway-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:3%;border-bottom:1px solid #cad7d9}.study-gateway-head b{font-size:clamp(6px,1.1vw,15px)}.study-gateway-head span{font-size:clamp(4px,.65vw,9px);color:#5a7889}
.study-gateway-body{flex:1;display:flex;flex-direction:column;justify-content:center}.study-gateway-body small{font-size:clamp(4px,.65vw,9px);color:#3a7191}.study-gateway-body h4{margin:4% 0;font:600 clamp(10px,1.6vw,23px)/1.35 var(--serif);letter-spacing:-.05em}.study-gateway-body p{font-size:clamp(5px,.75vw,11px);color:#5b6f79}
.study-gateway-steps{display:flex;flex-wrap:wrap;gap:4px;margin-top:6%}.study-gateway-steps span{padding:3px 6px;border:1px solid #bdced1;border-radius:20px;color:#355e75;font-size:clamp(4px,.6vw,8px)}.study-gateway-desktop footer{font-size:clamp(4px,.6vw,8px);color:#71838a}
.study-row-tile{position:absolute;z-index:2;right:4%;top:10%;width:42%;height:80%;display:flex;flex-direction:column;justify-content:space-between;padding:14px;border:1px solid #c6d5d8;border-radius:12px;background:#f4f7f5;box-shadow:0 13px 24px #172b3430;color:#2c4657;transform:rotate(4deg)}
.study-row-tile span{font:500 8px var(--mono);color:#577e93}.study-row-tile strong{font:600 17px/1.35 var(--serif);letter-spacing:-.04em}.study-row-tile small{font-size:9px;font-weight:700;color:#24527a}
.business-row[data-business="math-primary"]{background:var(--paper)}.business-row[data-business="math-primary"] .row-product-bg{opacity:.25}.business-row[data-business="math-primary"] .business-desc{max-width:58%}
@media(max-width:640px){.study-row-tile{width:38%;padding:11px}.study-row-tile strong{font-size:14px}}